首页 > 代码库 > （三）Knockout - ViewModel 的使用2 - select应用
（三）Knockout - ViewModel 的使用2 - select应用
下拉菜单
<select>常用的data-bind参数:
•options :
指向数组或ko.observableArray()，KO会将数组元素转换为下拉选项。如果是ko.observableArray()，当动态增加或移除阵列元素时，下拉选项也会马上跟着增减。
•optionsText, optionsValue :
用来产生下拉选项的数组元素可以是具有多个属性的JavaScript对象，通过optionText, optionValue设定属性名称字符串，我们可以指定用哪个属性当成<option>的文字内容，哪个属性当成value 。
•value :
指向ViewModel的特定属性，属性一般以ko.observable()声明。如此当下拉菜单选取新值，所选的<option> value值会更新到ViewModel属性上；而一旦该属性被程序修改或因使用者输入改变，下拉菜单也会自动切到新值对应的<option >选项上。
•selectedOptions :
针对可多选( multiple )的<select>，selectedOptions可绑定到ko.observableArray()类型属性，该数组使会即时反应使用者所选取的项目集合；而变更该obervableArray数组的元素项目，也会立刻变更对应option的selected状态。
DEMO1
使用静态数据绑定
<select data-bind ="options:selectOptions, optionsText: ‘name‘, optionsValue: ‘id‘, value:result"></select><br/>排行：<span data-bind ="text:result" ></span ><br/><input type ="button" value ="http://www.mamicode.com/Third" data-bind ="click:changeToYoung"/>var MyViewModel = function() { var me = this; me.selectOptions = [ {name:"First",id:1}, {name:"Second",id:2}, {name:"Third",id:3} ]; me.result = ko.observable(2); //只能检测 value me.changeToYoung = function(){ me.result(3); //ko.observable()声明的属性，使用propName("...")方式改变其值，才能通知相关UI产生联动效果 }}ko.applyBindings(new MyViewModel());解析：
- ViewModel定义了selectOptions数组(假设选项不会动态变化，故用一般数组即可，不用ko.observableArray)，数组元素对象各有t、v两个属性分别当做<option>的文字跟值，而下拉菜单的选取结果要反应到result这个ko.observable()属性上
- 为了观察选取结果，再增加一个<span data-bind="text: result">即时反应result内容。
- 声明一个chageToPhone()函数，将result的值强制指定为"Third" 。
DMEO2
动态数据绑定
在<select> data-bind的options选项如果绑定到ko.observableArray()，就可以动态新增选项效果，也就是可以利用其完成常见的级联效果的。
var ViewModel = function() { var me = this; //使用observableArray进行绑定可以动态变更option选项 me.selectOptions = ko.observableArray([ { "text": "请选择", "value": "0" } ]); me.result = ko.observable("0");//添加result监控属性，初始绑定值为0}
var vm = new ViewModel();ko.applyBindings(vm);$("#btnAddItem").click(function () { vm.selectOptions.push({ "text": $("#txtOptText").val(), "value": $("#txtOptValue").val() });});
<select style="background-color:ActiveCaption;width:100px"
data-bind="options: selectOptions, optionsText: ‘text‘, optionsValue: ‘value‘, value: result"></select>Value=http://www.mamicode.com/
<span data-bind=" text: result"></span><div> Text: <input id="txtOptText" value="选项1"/></div><div>Value: <input id="txtOptValue" value="1" /></div><input type="button" value="新增选项" id=‘btnAddItem‘ />
（三）Knockout - ViewModel 的使用2 - select应用