Add three drop-down boxes to the page:
<select id="co" "onchang(this)"> //Event triggered when the current content of onchange changes <option value="-1">-Please choose-</option> <option value="0">Henan Province</option> <option value="1">Shandong Province</option> <option value="2">Hebei Province</option> <option value="3">Zhejiang Province</option> </select> <select id="city" "changcity(this)"> <option value="-1">-Please choose-</option> </select> <select id="xian"> <option value="-1">-Please choose-</option> </select>
Provide the value value as the index for selecting content in the option
In js code, create an array to store City and County Information
var arr=new Array(4); //Create with new arr[0]=new Array("Nanyang City","Zhengzhou City","Luoyang City","Anyang City","Xinxiang City"); arr[1]=new Array("HeZe","Pingyang City","Langfang City","Beijing City"); arr[2]=new Array("Handan City","Shijiazhuang City","Ping Shi"); arr[3]=new Array("Suzhou City","Ningbo City","Zhenjiang City"); var qu=[ //Create a 3D array using literal [ ["Xixia County","Neixiang County"], ["Partial sweet County","Poverty-stricken counties"], ], [ ["Fuyu County","Linxian County"], ["1","2"], ], [ ["Ping Pixian","Jiayu County"], ["chord","Ze county"], ], [ ["Ming County","Lin Bu County"], ["Ho County","Quan county"], ] ];
When the province information changes, take the value value of the current drop-down box to obtain the city information corresponding to the province in the first array, and add the function:
function onchang(op){ var a=op.value; var b=arr[a]; var city=document.getElementById('city'); var xian=document.getElementById('xian'); if(a=="-1"){ city.innerHTML="<option value='-1'>-Please choose-</option>"; xian.innerHTML="<option value='-1'>-Please choose-</option>"; return; } city.options.length=0; //Options to clear the city drop-down box for(var i=0;i<b.length;i++){ var opcity=document.createElement("option"); opcity.innerText=b[i]; //Add content to the created options opcity.value=i; //Assign value to the created option city.appendChild(opcity); //Add the created option to the corresponding drop-down box } }
When the city information changes, take the value value corresponding to the current option to get the county information corresponding to the city in the array, and add the function;
function changcity(city){ var a=document.getElementById("city").value; var b=document.getElementById("co").value; var c=qu[b][a]; var xian=document.getElementById('xian'); xian.options.length=0; for(var i=0;i<c.length;i++){ var opcity=document.createElement("option"); opcity.innerText=c[i]; opcity.value=i; xian.appendChild(opcity); } }