Tôi đang sử dụng knockout.js để tạo một mã số <option>
của <select>
và cũng để đặt giá trị được chọn mặc định của nó. Tất cả hoạt động như mong đợi cho đến khi Tôi thêm liên kết optionsValue
, tại thời điểm đó trình đơn thả xuống không còn hiển thị giá trị ban đầu thích hợp khi tải trang.Làm cách nào để bạn sử dụng knockout.js để tạo một mã số <option> của <select> với cả văn bản và giá trị cũng như đặt giá trị được chọn ban đầu?
Nói cách khác, các công trình này:
<select data-bind="value: selectedAccount, options: accounts, optionsText: 'name'"></select>
... nhưng điều này không làm việc:
<select data-bind="value: selectedAccount, options: accounts, optionsText: 'name', optionsValue: 'id'"></select>
Dưới đây là đơn giản hóa, mã hoàn chỉnh của tôi:
<!doctype html>
<html>
<head>
<title>Demo</title>
<script src='knockout-2.1.0.debug.js'></script>
</head>
<body>
<select data-bind="value: selectedAccount, options: accounts, optionsText: 'name', optionsValue: 'id'"></select>
<script>
function QuickTransferViewmodel()
{
var self = this;
self.accounts =
[
{ id: 0, name: "Spending" },
{ id: 1, name: "Savings" }
];
self.selectedAccount = ko.observable(self.accounts[1]);
}
ko.applyBindings(new QuickTransferViewmodel());
</script>
</body>
</html>
tôi sẽ mong đợi trình đơn thả xuống hiển thị "Tiết kiệm" như được chọn theo mặc định. Nó chỉ làm như vậy nếu tôi loại bỏ các ràng buộc optionsValue.
Cảm ơn trước!
Không liên quan trực tiếp đến câu hỏi của bạn, nhưng bạn có thể nhận được một số kết quả bất thường nếu liên kết 'giá trị' là trước' tùy chọn'. –