Knockout.js - Nhận giá trị văn bản đã chọn trong trình đơn thả xuống

Question

Tôi muốn biết cách lấy giá trị TEXT được chọn từ trình đơn thả xuống, chỉ cần nhớ rằng trình đơn thả xuống của tôi có dữ liệu cố định và không được điền bởi "ko.observableArray()". Bất kỳ ý tưởng?

Khi tôi chọn một tùy chọn muốn có: Lựa chọn giá trị và văn bản.

<p> 
    Select a car: 
    <select data-bind="value: selectedValue, optionsText:???"> 
     <option value="volvo">Volvo</option> 
     <option value="saab">Saab</option> 
     <option value="mercedes">Mercedes</option> 
     <option value="audi">Audi</option> 
    </select> 
</p> 

<span data-bind="text: selectedValue"></span> 
<br/> 
<span data-bind="text: selectedText"></span> 

tôi ko ViewModel:

var viewModel = { 
     selectedValue : ko.observable(), 
     selectedText : ko.observable() 
}; 

ko.applyBindings(viewModel); 

Xem Fiddle này: JSFiddle

Answer 1

Bạn phải làm việc với các tùy chọn bắt buộc cho việc này. Và giống như Jeff nói, đừng lạm dụng.

var viewModel = { 
     selectedValue : ko.observable(), 
     selectedText : ko.observable(), 
    carOptions : ['Volvo','Saab', 'Mercedes', 'Audi'] 
}; 

ko.applyBindings(viewModel); 

Markup:

<p> 
    Selecte a car: 
    <select data-bind="value: selectedValue, options: carOptions"> 

    </select> 
</p> 

<span data-bind="text: selectedValue"></span> 
<br/> 
<span data-bind="text: selectedText"></span> 

Đây là cách đơn giản nhất để làm như vậy. Để biết các tình huống phức tạp hơn, hãy truy cập vào docs.

JsFiddle 1, JsFiddle 2

Answer 2

Tôi không biết nếu có một giải pháp khả thi với Knockout.js. Tôi cho phép bạn hai giải pháp khả thi:

Giải pháp 1

Bạn có thể sử dụng một chút Javascript mẹ đẻ để đạt được mục tiêu của bạn:

viewModel.selectedValue = ko.observable(); 
viewModel.selectedText = ko.computed(function() { 
    var elem = document.querySelector("select option[value=" + viewModel.selectedValue() + "]"); 
    return elem && elem.innerHTML; 
}); 

Như bạn thấy, bạn có thể đi "giá trị" và sử dụng nó để trả về phần tử DOM đáp ứng các yêu cầu của bạn. Tất nhiên bạn có thể thay thế select bằng id, nếu bạn cần.

Kiểm tra this fiddle để xem nó hoạt động.

Giải pháp 2

Cách Knockout để làm điều này là có một mảng với tất cả các yếu tố trở nên thông dụng:

var cars = [{ id: 'volvo', name: 'Volvo' }, { id: 'saab', name: 'Saab' }, { id: 'mercedes', name: 'Mercedes' }, { id: 'audi', name: 'Audi' }]; 

Sau đó, nó phụ thuộc vào những gì bạn cần khi bạn nói "value ", hãy nhớ rằng bạn đang ràng buộc đối tượng, không phải danh sách khóa/giá trị:

HTML:

<select data-bind="options: cars, value: selectedCar, optionsText: 'name'"></select> 

Và JS của bạn:

selectedCar = ko.observable(); 
selectedValue = ko.computed(function() { 
    return selectedCar() && selectedCar().id; 
}); 
selectedText = ko.computed(function() { 
    return selectedCar() && selectedCar().name; 
}); 

Bằng cách này bạn sẽ có một cách riêng biệt "giá trị" của bạn và "văn bản" của mình (gọi là tốt hơn id và name tài sản) thành hai quan sát tính toán.

Xem the fiddle working.

Answer 3

Tôi vừa phải đạt được điều này và tôi đã thêm một chức năng ko.computed để lấy văn bản đã chọn từ các tùy chọn như sau:

// assume that options has been populated with Key/Value pairs 
self.options = ko.observableArray([]); 

self.selectedType = ko.observable(null); 
self.selectedTypeText = ko.observable(null); 
self.selectedType.subscribe(function (newValue) { 
    if (newValue) { 
     self.checkAccess(newValue); 

     $.each(self.options(), function (i, item) { 
      if (item.Key === newValue) { 
       self.selectedTypeText(item.Value); 
      } 
     }); 
    } 
});