JavaScript to achieve simple provincial and municipal linkage

This article shares the specific code for JavaScript to achieve simple provincial and municipal linkage for your reference. The specific content is as follows

step

* Create a page with two drop-down selection boxes
* There is an event in the first drop-down box: change event onchange event
- Method add1(this.value); indicates the value in the currently changed option
* Create a two-dimensional array to store data
* The first element in each array is the country name, and the following elements are the cities in the country
*

1. Traverse a two-dimensional array

2. The result is also an array (country correspondence)

3. Get the first value in the array and compare it with the passed value

4. If they are the same, get the element after the first value

5. Get the city selection

6. Add the past (use) appendChild method
- Create option (three steps)

/*
Since you have to add option to the city every time
The second time you add it, it will be appended.

* Before adding each time, check whether there is an option in the city, if so, delete it
*/

The code is as follows:

<html>
 <head>
   
  <title>Provincial and Municipal Linkage</title>
  <style type = "text/css">
  </style>
 </head>
 <body>
   <select id="countyid" onchange="add1(this.value)">
  <option value="0">--Please select--</option>
  <option value="中国">China</option>
  <option value="United States">United States</option>
  <option value="United Kingdom">United Kingdom</option>
  <option value="日本">日本</option>
 
   </select>
 
    <select id="cityid" >
 
   </select>
 </body>
 <script type="text/javascript">
 var arr = new Array(4);
 arr[0]=["China","Beijing","Shanghai","Shenzhen","Hangzhou"];
 arr[1]=["United States","Washington","New York","Detroit","Chicago"];
 arr[2]=["United Kingdom","London","Birmingham","Leeds","Liverpool"];
 arr[3]=["Japan","Tokyo","Osaka","Hokkaido","Nagasaki"];
 /*
  step:
  1. Traverse the two-dimensional array 2. Get an array-country correspondence 3. Compare the first value in the array with the passed value 4. If they are the same, get the elements after the first value 5. Get the city select
  6. Add the past - appendChild method - create option (three steps)
   
  Since you have to add option to the city every time
  The second time you add it, it will be appended.
  * Before adding each time, check whether there is an option in the city, if so, delete it*/
 
 function add1(val){
  //Get the selection in city
   var city1 = document.getElementById("cityid");
   var ops = city1.getElementsByTagName("option");
   for(var m=0;m<ops.length;m++){
    var op = ops[m];
    city1.removeChild(op);
    m--;
   }
  for(var i=0;i<arr.length;i++){
   arr1=arr[i];
   var firstValue = arr1[0];
   if (firstValue == val)
   {
    
    //Create option
    for(var j=1;j<arr1.length;j++){
     var value1 = arr1[j];
     var option1=document.createElement("option");
     var text1 = document.createTextNode(value1);
     option1.appendChild(text1);
     city1.appendChild(option1);
    }
   }
   
  }
 }
 
   </script>
 
</html>

Effect diagram demonstration:

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

An example of elegant writing of judgment in JavaScript
56 practical JavaScript tool functions to help you improve development efficiency
JavaScript implements draggable modal box
JavaScript to implement drop-down list selection box
js tag syntax usage details

<<: Steps to set up and mount shared folders on Windows host and Docker container

>>: Solution to HTML2 canvas SVG not being recognized