js implements simple provincial, municipal and district three-level selection cascade

js implements simple provincial, municipal and district three-level selection cascade

This article shares the specific code of js to realize the three-level selection of provinces, cities and districts for your reference. The specific content is as follows

Code:

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Title</title>
 </head>
 <body>
      <select id="province">
        <option>---Please select---</option>
      </select>
      <select id="city">
        <option>---Please select---</option>
      </select>
      <select id="area">
        <option>---Please select---</option>
      </select>
  <script src="addr.js"></script>
  <script src="../lib/jquery-3.3.1.js"></script>
  <script>
   var pro = [];
   $(function (){
                $.each(temp,function (){
                    $("#province").append("<option>"+$(this)[0].label+"</option>");
                });
                $("#province").on("change",function (){
                    $("#city").html("<option>"+"---Please select---"+"</option>");
                    $("#area").html("<option>"+"---Please select---"+"</option>")
                    var select_pro = $(this).val();
                    $.each(temp,function (index,element){
                        if (element.label == select_pro){
                            var city = element.children;
                            for (let i = 0; i < city.length ; i++) {
                                $("#city").append("<option>"+city[i].label+"</option>");
                            }
                            $("#city").on('change',function ()
                            {
                        $("#area").html("<option>"+"---Please select---"+"</option>");
                         var select_city = $(this).val();

                        for (var i=0;i < city.length ; i++)
                            {
                             console.log(city[i].label);
                             if (city[i].label == select_city)
                             {
                               var area = city[i].children;
                               for (var i=0;i < area.length ; i++)
                                {
                          $("#area").append("<option>"+area[i].label+"</option>");
                                 }
                           }
                         }
                         });
                   }
               });
        });
   });
  </script>
 </body>
</html>

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:
  • A complete example of a national provincial and municipal secondary linkage drop-down selection menu implemented by js
  • PHP+Mysql+Ajax+JS realizes the linkage between provinces, cities and districts
  • JS makes a simple three-level linkage
  • Select cascading drop-down box example in Vue.js 2.0
  • The best provincial and municipal secondary linkage native js to achieve what you deserve
  • JS real multi-level linkage drop-down menu class, easily realize the linkage menu of provinces, cities and districts!
  • JavaScript realizes the three-level linkage drop-down box menu of provinces, cities and districts
  • Province, city and district three-level linkage drop-down box menu javascript version
  • jquery+json universal three-level linkage drop-down list
  • js to achieve the effect code of cascading drop-down menu of provinces and cities across the country

<<:  How to monitor and delete timed out sessions in Tomcat

>>:  One sql statement completes MySQL deduplication and keeps one

Recommend

Analysis of the pros and cons of fixed, fluid, and flexible web page layouts

There is a question that has troubled web designe...

Build a stable and highly available cluster based on mysql+mycat, load balancing, master-slave replication, read-write separation operation

Database performance optimization generally adopt...

Analysis of the locking mechanism of MySQL database

In the case of concurrent access, non-repeatable ...

Detailed explanation of the download process of the mysql-connector-java.jar package

Download tutorial of mysql-connector-java.jar pac...

TCP performance tuning implementation principle and process analysis

Three-way handshake phase Number of retries for c...

Specific use of node.js global variables

Global Object All modules can be called global: r...

JavaScript to achieve custom scroll bar effect

In actual projects, the up and down scroll bars a...

Detailed explanation of CocosCreator Huarongdao digital puzzle

Table of contents Preface text 1. Panel 2. Huaron...

Detailed steps for installing MySQL using cluster rpm

Install MySQL database a) Download the MySQL sour...

Installation and use of Linux operation and maintenance tool Supervisor (process management tool)

1. Introduction Supervisor is a general process m...

MySQL Community Server 5.6 installation and configuration tutorial under Windows 8

This article records the installation and configu...

CSS to achieve the image hovering mouse folding effect

CSS to achieve the image hovering mouse folding e...

Example of how to change the domestic source in Ubuntu 18.04

Ubuntu's own source is from China, so the dow...

Several ways to manually implement HMR in webpack

Table of contents 1. Introduction 2. GitHub 3. Ba...

Element uses scripts to automatically build new components

Table of contents background How does element-ui&...