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

Two practical ways to enable proxy in React

Two ways to enable proxy React does not have enca...

mysql solves time zone related problems

Preface: When using MySQL, you may encounter time...

Detailed explanation of JavaScript stack and copy

Table of contents 1. Definition of stack 2. JS st...

JavaScript to achieve click image flip effect

I was recently working on a project about face co...

MySQL series: Basic concepts of MySQL relational database

Table of contents 1. Basic Concepts 2. Developmen...

CSS3 to achieve simple white cloud floating background effect

This is a very simple pure CSS3 white cloud float...

How to simulate enumeration with JS

Preface In current JavaScript, there is no concep...

33 of the best free English fonts shared

ChunkFive Free Typefamily Cuprum JAH I Free font Y...

The use and difference between vue3 watch and watchEffect

1.watch listener Introducing watch import { ref, ...

Example of how to achieve semi-transparent background image and opaque content in CSS3

I encountered this problem when I was making the ...

How to view and clean up Docker container logs (tested and effective)

1. Problem The docker container logs caused the h...

Detailed explanation of the latest IDEA process of quickly deploying and running Docker images

background Use idea with docker to realize the wh...

Mysql experiment: using explain to analyze the trend of indexes

Overview Indexing is a skill that must be mastere...

JavaScript to achieve fixed sidebar

Use javascript to implement a fixed sidebar, for ...

How to implement MySQL bidirectional backup

MySQL bidirectional backup is also called master-...