knockoutjs十四 option绑定
option绑定出息在select 中,我只想讲单选的select,这个用的比较多,至于多选的请大家自行学习吧。
讲解select我就不照着官方的例子讲了,因为这是我之前用的比较多的,我也浪费了很多时间学习这个,所以我就用一个例子来讲解下,那就是select之间的联动。想必大家都知道联动是select经常出现的。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53
| <div class="container"> <div class="row"> <div class="col-md-4"> <span>省</span> <select data-bind="options: province, optionsText: 'name', value: provinceSelected, optionsCaption: 'Choose...',event:{change:changePro}" class="form-control "></select> </div> <div class="col-md-4"> <span>市</span> <select data-bind="options:city, optionsText: 'name', value: citySelected, optionsCaption: 'Choose...'" class="form-control "></select> </div> </div> </div> <script> function Model() { var self = this; self.citySelected = ko.observable(); self.provinceSelected = ko.observable(); self.province = ko.observableArray([{ value: 1, name: 'jiangsu' }, { value: 2, name: 'zhejiang' }]); self.city = ko.observableArray(); self.changePro = function(data, event) { var value = self.provinceSelected().value; if (value == 1) { self.city([{ value: 1, name: 'zuzhou' }, { value: 2, name: 'taizhou' }]); } else if (value == 2) { self.city([{ value: 1, name: 'huzhou' }, { value: 2, name: 'hangzhou' }]); } }; } var model = new Model(); ko.applyBindings(model); </script>
|
上面的一个例子是省份和城市的联动选择,我使用了change事件来监听select的值的改变,然后在这个方法中获取到当前的选中值,这个方法中一般是进行一个ajax请求,回去下一级的数据,我就模仿了一个,然后给下一级的select的option设值,options就是select中的option选项,它一般是一个数组,optionsText是显示出来的值,value是被选中值,optionsCaption可以用来提醒这个select是用来选择什么的。这样一个联动的select就实现了,很简单。
有误请联系我qq1357197829,我准备过一段时间把这个系列搬到github pages上了,到时候希望大家赏脸。代码托管在https://github.com/lushunming/knockoutJSDemo.git可以直接克隆。