Home > Developer > Web Develop
Recently with JS wrote a section of the provincial and county linkage set, first pass up, the latter will continue to optimize
As follows:
1<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">234<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>5<title>dom Homework </title>67<!--used to demonstrate the linkage of cities and counties8<body>9<select name= "" id= "Pro" ></select>Ten<select name= "" id= "City" ></select> One<select name= "" Id= "County" ></select> A<script type= "Text/javascript" > -(function(Win) { -Win.onload=function(){ the - varHgcity={name: "Huanggang", children:["Qichun area", "Wuxue area", "Stream area"]}; - varWhcity={name: "Wuhan", children:["Hankou area", "Wuchang District", "Hanyang District"]}; - varhbarray=[]; + Hbarray.push (whcity,hgcity); - varHbpro={name: "Hubei Province", Children:hbarray}; + A varSzcity={name: "Shenzhen", children:["Nanshan District", "Luohu District", "Yantian District"]}; at varDgcity={name: "Dongguan", children:["Fenggang County", "Guancheng County", "Changping County"]}; - vargdarray=[]; - Gdarray.push (szcity,dgcity); - varGdpro={name: "Guangdong Province", Children:gdarray}; - - varZjcity={name: "Zhenjiang", children:["Jingkou District", "Dantu zone", "New Town"]}; in varNjcity={name: "Nanjing", children:["Qixia District", "Jiangning District", "Chengbei District"]}; - varjsarray=[]; to Jsarray.push (zjcity,njcity); + varJspro={name: "Jiangsu Province", Children:jsarray}; - the //define an array of provinces and counties * varchinaarray=[]; $ Chinaarray.push (Hbpro,gdpro,jspro);Panax Notoginseng - //get DOM objects at all levels of the city and county the varProdom = document.getElementById ("Pro"); + varCitydom =document.getelementbyid ("City"); A varCountydom=document.getelementbyid ("County"); the + //Initialize province - adddddress (chinaarray,prodom); $ //Initialize City $ Pro (); - //Initialize County/district - cit (); theProdom.onchange=Pro; - //ProvinceWuyi functionPro () { the //clear the city option first -Citydom.innerhtml= ""; Wu //gets the value of the province when the identity option is changed - varnum =Prodom.value; About //City of the selected province $ varcityarray=Chinaarray[num].children; - adddddress (cityarray,citydom); - //Linkage County - cit (); A }; + //automatically populate county/district according to the trigger event of the city option theCitydom.onchange=cit; - //City $ functioncit () { the //empty the last value for each change theCountydom.innerhtml= ""; the //when the city is changed, automatically obtain the corresponding province, the value of the city the varNUM1 =Prodom.value; - varnum2 =Citydom.value; in //selected city-corresponding county, district the varCountyarray =Chinaarray[num1].children[num2].children; the adddddress (countyarray,countydom); About }; the }; the //County the functionadddddress (adrarray,dom) { + for(vari=0,len=adrarray.length;i<len;i++){ - varOpt=document.createelement ("option"); the if(adrarray[i].name) {BayiOpt.innerhtml=Adrarray[i].name; the}Else{ theOpt.innerhtml=Adrarray[i]; - } -Opt.value=i; the Dom.appendchild (opt); the } the } the }) (window) - the</script> the</body> theJS Design Province, city, county linkage
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
