如何在select上對數據文本字段創建綁定？

Question

我有一個由select元素初始化的下拉菜單。

創建mvvm如何綁定到選定的數據文本字段？

我沒有數據源。

<select id="size"> 
       <option value="1">S - 6 3/4"</option> 
       <option value="2">M - 7 1/4"</option> 
       <option value="3">L - 7 1/8"</option> 
       <option value="4">XL - 7 5/8"</option> 
</select> 

我必須綁定到選定的文本。例如：M - 7 1/4"和value

更新

Answer 1

你可以簡單地綁定到<select>的價值 - 這將使用文本，如果選擇沒有值集;如果你既需要，你可以使用一個計算字段的文本：

HTML：

<div id="bindme"> 
    <select id="size" data-bind="value: selectedValue"> 
     <option value="1">S - 6 3/4"</option> 
     <option value="2">M - 7 1/4"</option> 
     <option value="3">L - 7 1/8"</option> 
     <option value="4">XL - 7 5/8"</option> 
    </select> 
    <div data-bind="text: selectedValue"></div> 
    <div data-bind="text: selectedText"></div> 
</div> 

JS：

var viewModel = kendo.observable({ 
    selectedValue: 2, 
    selectedText: function() { 
     var value = this.get("selectedValue"); 
     var text = $('#size option[value="' + value + '"]').html(); 

     return text; 
    } 
}); 

kendo.bind($("#bindme"), viewModel); 

See demo

還有其他的方法來做到這一點（這不是很漂亮，因爲它與DOM相結合），例如與自定義綁定，或like this。這種取決於你的確切設置。