KnockOutjs-简单实现无刷新省市联动

前言

本示例适合有KO基础的同学参考。基础篇本文不讨论。有兴趣的同学可以查看官方网站

页面布置

分别设置两个select标签,一个用于放置city数据，一个用于放置coutry数据。具体代码如下:

<div id="divArea">
<select data-bind="options: CityArray,optionsText: 'AreaName',optionsValue: 'AreaID',value: selectedCityAreaID,optionsCaption: '请选择',event:{ change: changeCity}"></select>
<select data-bind="options: nowChild,optionsText: 'AreaName',optionsValue: 'AreaID',optionsCaption: '请选择'"></select>
</div>

Model声明

//定义区县列表
var coutryArray = [
{
FatherAreaID: "330100",
Childs: [
{ AreaName: '市辖区', AreaID: '330101' },
{ AreaName: '上城区', AreaID: '330102' },
{ AreaName: '下城区', AreaID: '330103' },
{ AreaName: '江干区', AreaID: '330104' },
{ AreaName: '拱墅区', AreaID: '330105' },
{ AreaName: '西湖区', AreaID: '330106' },
{ AreaName: '滨江区', AreaID: '330108' },
{ AreaName: '萧山区', AreaID: '330109' },
{ AreaName: '余杭区', AreaID: '330110' },
{ AreaName: '桐庐县', AreaID: '330122' },
{ AreaName: '淳安县', AreaID: '330127' },
{ AreaName: '建德市', AreaID: '330182' },
{ AreaName: '富阳市', AreaID: '330183' },
{ AreaName: '临安市', AreaID: '330185' }
]
},
{
FatherAreaID: "330200",
Childs: [
{ AreaName: '市辖区', AreaID: '330201' },
{ AreaName: '海曙区', AreaID: '330203' },
{ AreaName: '江东区', AreaID: '330204' },
{ AreaName: '江北区', AreaID: '330205' },
{ AreaName: '北仑区', AreaID: '330206' },
{ AreaName: '镇海区', AreaID: '330211' },
{ AreaName: '鄞州区', AreaID: '330212' },
{ AreaName: '象山县', AreaID: '330225' },
{ AreaName: '宁海县', AreaID: '330226' },
{ AreaName: '余姚市', AreaID: '330281' },
{ AreaName: '慈溪市', AreaID: '330282' },
{ AreaName: '奉化市', AreaID: '330283' }
]//其他的市省略
}];
var modelArea = {
CityArray: [
{ AreaName: '杭州市', AreaID: '330100' },
{ AreaName: '宁波市', AreaID: '330200' },
{ AreaName: '温州市', AreaID: '330300' },
{ AreaName: '嘉兴市', AreaID: '330400' },
{ AreaName: '湖州市', AreaID: '330500' },
{ AreaName: '绍兴市', AreaID: '330600' },
{ AreaName: '金华市', AreaID: '330700' },
{ AreaName: '衢州市', AreaID: '330800' },
{ AreaName: '舟山市', AreaID: '330900' },
{ AreaName: '台州市', AreaID: '331000' },
{ AreaName: '丽水市', AreaID: '331100' }
],
selectedCityAreaID: ko.observable(),
nowChild: ko.observableArray(),
changeCity: function () {
for (var i = 0, length = coutryArray.length; i < length; i++) {
if (coutryArray[i].FatherAreaID == this.selectedCityAreaID()) {
this.nowChild(coutryArray[i].Childs);
}
}
}
};
ko.applyBindings(modelArea, $("#divArea")[0]);

效果图

①选择杭州市，出现杭州市所属的区县



② 选择宁波市，出现宁波市所属的区县



有什么写的不对的，欢迎拍砖~