jquery realizes triple linkage

Online read a lot about the linkage of JQ or JS code, the most recent class of the front of the great God taught me a more simple than the online JQ linkage method, I have been pondering over the other method is simpler and more concise so here to share

First on the HTML code

<DivID= "Select-form">         <SelectID= "Provinse"name="">           <option>Please select the province</option>         </Select>                  <SelectID= "City"name="">           <option>Please select a city</option>         </Select>                  <SelectID= "Town"name="">           <option>Please select a district/County</option>         </Select>                  <ahref="#">Search</a>      </Div>

JQ Code

//Triple linkage drop-down box code    varArrydata ={Guangdong province: {Guangzhou:"Liwan District, Yuexiu, Haizhu District, Tianhe District, Fangcun District, Baiyun District, Huangpu District, Fanyu, Flower City, Zengcheng, Conghua", Shenzhen:"Luohu District, Futian District, Nanshan District, Bao ' an district, Longgang District, Yantian District", Zhuhai:"Xiangzhou District, Doumen District, King Bay District", Zhanjiang:"Chikan District, Xiashan District, Potou District, Mazhang District, Zhuxi County, Xuwen County, Lianjiang, Leizhou, Wuchuan"}, Hebei province: {Shijiazhuang City:"Shenze County, Wuji County, Zhao Xian", Tangshan:"Yutian County, Zunhua, Qianan"}, Shandong province: {Jinan:"Lixia District, Naka Ward, Kuimeng District, Tianqiao District, Licheng District, Changqing County, Pingyin County, Jiyang County, Shanghe County, Zhangqiu", Qingdao:"Shinan District, Shibei District, Sifang District, Huangdao District, Laoshan District, Lichang District, Chengyang District"          }                    };//Arrydata End    //An array is defined first, the array elements are separated, the array is divided into two parts, the second part is the name of the city, and then the districts/counties        vari = 0;//First, define a variable I for the following function traversal element with    varSavedefault =NewArray; //Create an array that stores the HTML presets above for the option content to initialize $ ("#select-form option"). each (function(i) {
        //Traverse all option to deposit the option HTML content corresponding to the subscript in the corresponding array subscript savedefault[i]= $( This). html (); I++;        }); functionSetDefault (obj) {varIndex = $ (obj). index ();//get an Object index by index ()$ (obj). html ("<option>" + Savedefault[index] + "</option>"); //match the contents of the corresponding array subscript by index            }; //start traversing Arrydata$.each (Arrydata,function(_provinse) {//iterate through the array to get the contents of the first part, i.e. the save name$ ("#provinse"). Append ("<option>" + _provinse + "</option>");//add a selection under the drop-down box with ID provinse    }); $("#provinse"). Change (function(){        //when the content of the province drop-down list changes, the following methods are performedSetDefault ("#city");//the selection box value of the initialized citySetDefault ("#town");//the value of the initialization zone/County$.each (Arrydata,function(_provinse,content) {//Content contains the contents of the second part, namely the city name and the name of the following districts/counties            if($ ("#provinse option:selected"). Text () = =_provinse) {//select the province with the same province name as the array, and the option $.each to add the corresponding content in the ID of city (content,function(_city,_town) {$ ("#city"). Append ("<option>" + _city + "</option>");                }); $("#city"). Change (function() {SetDefault ("#town"); $.each (Content,function(_city,_town) {//Here The second part is divided into two parts, part of the city name _city, the other part is the district/county name _townif($ ("#city option:selected"). Text () = =_city) {//This is also the same, when the city name changes the corresponding district/county name is also changed to the corresponding content $.each (_town.split (","),function() {//the contents of _town are separated by commas by a single element $ ("#town"). Append ("<option>" + This+ "</option>");                         }); };                                         }); });                            }                    });       }); });

And finally, thanks to the great God who helped me, the front-end dog.

jquery realizes triple linkage