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>
  <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);
    }
   }

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