konckoutjs-simple implementation of non-flush provinces and cities linkage

Write in front:

This example is suitable for students with a KO base reference. The basic article is not discussed. Interested students can view the official website

2-page layout:

1 <div id= "Divarea" >2   <select data-bind= "options:cityarray,optionstext: ' AreaName ', Optionsvalue: ' Areaid ', value:selectedcityareaid,optionscaption: ' Please select ', event:{change:changecity} ' ></select >3   <select data-bind= "options:nowchild,optionstext: ' AreaName ', Optionsvalue: ' Areaid ', Optionscaption: ' Please select ' ></select>4 </div>

3-model statement

1             //Define County List2             varCoutryarray = [3             {4Fatherareaid: "330100",5 Childs: [6{areaname: ' districts ', Areaid: ' 330101 ' },7{areaname: ' Upper Town ', Areaid: ' 330102 ' },8{areaname: ' Lower Town ', Areaid: ' 330103 ' },9{areaname: ' Jianggan District ', Areaid: ' 330104 ' },Ten{areaname: ' Gongshu District ', Areaid: ' 330105 ' }, One{areaname: ' West L. District ', Areaid: ' 330106 ' }, A{areaname: ' Bingjiang District ', Areaid: ' 330108 ' }, -{areaname: ' Xiaoshan District ', Areaid: ' 330109 ' }, -{areaname: ' Yuhang ', Areaid: ' 330110 ' }, the{areaname: ' Tonglu County ', Areaid: ' 330122 ' }, -{areaname: ' Chunan County ', Areaid: ' 330127 ' }, -{areaname: ' Jiande ', Areaid: ' 330182 ' }, -{areaname: ' Fuyang ', Areaid: ' 330183 ' }, +{areaname: ' Linan ', Areaid: ' 330185 ' } -                 ] +             }, A             { atFatherareaid: "330200", - Childs: [ -{areaname: ' districts ', Areaid: ' 330201 ' }, -{areaname: ' Haishu District ', Areaid: ' 330203 ' }, -{areaname: ' Koto ward ', Areaid: ' 330204 ' }, -{areaname: ' Jiangbei District ', Areaid: ' 330205 ' }, in{areaname: ' Beilun District ', Areaid: ' 330206 ' }, -{areaname: ' Zhenhai District ', Areaid: ' 330211 ' }, to{areaname: ' Yinzhou District ', Areaid: ' 330212 ' }, +{areaname: ' Xiangshan County ', Areaid: ' 330225 ' }, -{areaname: ' Ninghai ', Areaid: ' 330226 ' }, the{areaname: ' Yuyao ', Areaid: ' 330281 ' }, *{areaname: ' Cixi ', Areaid: ' 330282 ' }, ${areaname: ' Fenghua ', Areaid: ' 330283 ' }Panax Notoginseng ]//other cities omitted -             }]; the             varModelarea = { + Cityarray: [ A{areaname: ' Hangzhou city ', Areaid: ' 330100 ' }, the{areaname: ' Ningbo ', Areaid: ' 330200 ' }, +{areaname: ' Wenzhou ', Areaid: ' 330300 ' }, -{areaname: ' Jiaxing ', Areaid: ' 330400 ' }, ${areaname: ' Huzhou ', Areaid: ' 330500 ' }, ${areaname: ' Shaoxing ', Areaid: ' 330600 ' }, -{areaname: ' Jinhua ', Areaid: ' 330700 ' }, -{areaname: ' Quzhou ', Areaid: ' 330800 ' }, the{areaname: ' Zhoushan ', Areaid: ' 330900 ' }, -{areaname: ' Taizhou ', Areaid: ' 331000 ' },Wuyi{areaname: ' Lishui ', Areaid: ' 331100 ' } the                 ], - selectedCityAreaID:ko.observable (), Wu NowChild:ko.observableArray (), -Changecity:function () { About                      for(vari = 0, length = coutryarray.length; i < length; i++) { $                         if(Coutryarray[i]. Fatherareaid = = This. Selectedcityareaid ()) { -                              This. Nowchild (Coutryarray[i]. Childs); -                         } -                     } A                 } +         }; theKo.applybindings (Modelarea, $ ("#divArea") [0]);

4-

①

Ii

What is wrong, welcome to shoot Bricks ~

konckoutjs-simple implementation of non-flush provinces and cities linkage