knockoutjs十四 option绑定

knockoutjs十四 option绑定

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可以直接克隆。