option绑定出息在select 中,我只想讲单选的select,这个用的比较多,至于多选的请大家自行学习吧。
讲解select我就不照着官方的例子讲了,因为这是我之前用的比较多的,我也浪费了很多时间学习这个,所以我就用一个例子来讲解下,那就是select之间的联动。想必大家都知道联动是select经常出现的。
<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);
上面的一个例子是省份和城市的联动选择,我使用了change事件来监听select的值的改变,然后在这个方法中获取到当前的选中值,这个方法中一般是进行一个ajax请求,回去下一级的数据,我就模仿了一个,然后给下一级的select的option设值,options就是select中的option选项,它一般是一个数组,optionsText是显示出来的值,value是被选中值,optionsCaption可以用来提醒这个select是用来选择什么的。这样一个联动的select就实现了,很简单。
有误请联系我qq1357197829,我准备过一段时间把这个系列搬到github pages上了,到时候希望大家赏脸。代码托管在https://github.com/lushunming/knockoutJSDemo.git可以直接克隆。