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

The problem and solution of using docker storage and causing Exit to cause files to fail to upload to the server

JavaScript to achieve simple provincial and municipal linkage

step

The problem and solution of using docker storage and causing Exit to cause files to fail to upload to the server

JavaScript to achieve mouse drag effect

Native JS to achieve digital table special effects

How to use border-image to implement text bubble border sample code

Introduction to the use of MySQL performance stress benchmark tool sysbench

How to smoothly go online after MySQL table partitioning

How to use worker_threads to create new threads in nodejs

Functions in TypeScript

Native js canvas to achieve a simple snake

Chrome 4.0 supports GreaseMonkey scripts

Recommend

MySql uses skip-name-resolve to solve the problem of slow external network connection client

Native js drag and drop function to create a slider example code

Problems and solutions of using jsx syntax in React-vscode

Vue3 Vue Event Handling Guide

td content automatically wraps table table td after setting the width too much text automatically wraps

Detailed Tutorial on Using xargs Command on Linux

Specific operations of MYSQL scheduled clearing of backup data

Tomcat Nginx Redis session sharing process diagram

Summary of MySQL usage specifications

React error boundary component processing

Complete steps to implement location punch-in using MySQL spatial functions

Uncommon but useful tags in Xhtml

MySQL 8.0.11 installation and configuration method graphic tutorial

MySQL index for beginners

How to use CSS to write different styles according to sub-elements