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