javascript to realize provincial city county linkage

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 id="city" "changcity(this)">
   <option value="-1">-Please choose-</option>
  <select id="xian">
   <option value="-1">-Please choose-</option>

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"],
               ["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');
     city.innerHTML="<option value='-1'>-Please choose-</option>";
     xian.innerHTML="<option value='-1'>-Please choose-</option>";
    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');
    for(var i=0;i<c.length;i++){
     var opcity=document.createElement("option");

Posted by alext on Wed, 04 Dec 2019 08:39:12 -0800