JavaScript to achieve simple provincial and municipal linkage

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

Recommend

Detailed explanation of Nginx current limiting configuration

This article uses examples to explain the Nginx c...

Introduction to MySQL database performance optimization

Table of contents Why optimize? ? Where to start?...

Common commands for deploying influxdb and mongo using docker

Deploy database based on docker sudo docker pull ...

Brief analysis of the MySQL character set causing database recovery errors

Importing data with incorrect MySQL character set...

Several ways to run Python programs in the Linux background

1. The first method is to use the unhup command d...

Sample code for using CSS to write a textured gradient background image

The page length in the project is about 2000px or...

Summary of knowledge points about null in MySQL database

In the MySQL database, null is a common situation...

A brief introduction to MySQL dialect

Putting aside databases, what is dialect in life?...

Logrotate implements Catalina.out log rotation every two hours

1. Introduction to Logrotate tool Logrotate is a ...

CSS3 uses the transition property to achieve transition effects

Detailed description of properties The purpose of...

Explanation on the use and modification of Tomcat's default program publishing path

The default program publishing path of tomcat7 is...

jQuery realizes dynamic particle effect

This article shares the specific code of jQuery t...

Should I use distinct or group by to remove duplicates in MySQL?

Preface About the performance comparison between ...

Installation and daemon configuration of Redis on Windows and Linux

# Installation daemon configuration for Redis on ...

Detailed explanation of the use of MySQL group links

Grouping and linking in MYSQL are the two most co...