jQuery implements the drop-down box for selecting the place of residence

The specific code for using jQuery to implement the drop-down box for selecting the place of residence is for your reference. The specific content is as follows

data.js

var data = [{
        provname: 'Zhejiang Province',
        provId: 1,
        cities: [{
            cityname: "Hangzhou",
            cityId: 101,
            areas: [{
                    areaname: "Hangzhou District 1",
                    areaId: 1011
                },
                {
                    areaname: "Hangzhou District 2",
                    areaId: 1012
                }
            ]
        }, {
            cityname: "Wenzhou City",
            cityId: 102,
            areas: [{
                areaname: 'Wenzhou District 1',
                areaId: 1021
            }, {
                areaname: 'Wenzhou District 2',
                areaId: 1022
            }]
        }, {
            cityname: "Ningbo City",
            cityId: 103,
            areas: [{
                areaname: 'Ningbo District 1',
                areaId: 1031
            }, {
                areaname: 'Ningbo District 2',
                areaId: 1032
            }]

        }, {
            cityname: "Shaoxing City",
            cityId: 104,
            areas: [{
                areaname: 'Shaoxing District 1',
                areaId: 1041
            }, {
                areaname: 'Shaoxing District 2',
                areaId: 1042
            }]

        }]
    }, {
        provname: 'Shandong Province',
        provId: 2,
        cities: [{
            cityname: "Jinan City",
            cityId: 201,
            areas: [{
                    areaname: "Jinan District 1",
                    areaId: 2011
                },
                {
                    areaname: "Jinan District 2",
                    areaId: 2012
                }
            ]
        }, {
            cityname: "Qingdao",
            cityId: 202,
            areas: [{
                areaname: 'Qingdao District 1',
                areaId: 2021
            }, {
                areaname: 'Qingdao District 2',
                areaId: 2022
            }]
        }, {
            cityname: "Jining City",
            cityId: 203,
            areas: [{
                areaname: 'Jining District 1',
                areaId: 2031
            }, {
                areaname: 'Jining District 2',
                areaId: 2032
            }]

        }, {
            cityname: "Weifang City",
            cityId: 204,
            areas: [{
                areaname: 'Weifang District 1',
                areaId: 2041
            }, {
                areaname: 'Weifang District 2',
                areaId: 2042
            }]

        }]
    },
    {
        provname: 'Guangdong Province',
        provId: 3,
        cities: [{
            cityname: "Guangzhou",
            cityId: 301,
            areas: [{
                    areaname: "Guangzhou District 1",
                    areaId: 3011
                },
                {
                    areaname: "Guangzhou District 2",
                    areaId: 3012
                }
            ]
        }, {
            cityname: "Chaoyang City",
            cityId: 302,
            areas: [{
                areaname: 'Chaoyang District 1',
                areaId: 3021
            }, {
                areaname: 'Chaoyang District 2',
                areaId: 3022
            }]
        }, {
            cityname: "Chenghai City",
            cityId: 303,
            areas: [{
                areaname: 'Chenghai District 1',
                areaId: 3031
            }, {
                areaname: 'Chenghai District 2',
                areaId: 3032
            }]

        }, {
            cityname: "Chaozhou City",
            cityId: 304,
            areas: [{
                areaname: 'Chaozhou District 1',
                areaId: 3041
            }, {
                areaname: 'Chaozhou District 2',
                areaId: 3042
            }]

        }]
    },
    {
        provname: 'Gansu Province',
        provId: 4,
        cities: [{
            cityname: "Lanzhou",
            cityId: 401,
            areas: [{
                    areaname: "Lanzhou District 1",
                    areaId: 4011
                },
                {
                    areaname: "Lanzhou District 2",
                    areaId: 4012
                }
            ]
        }, {
            cityname: "Baiyin City",
            cityId: 402,
            areas: [{
                areaname: 'Silver District 1',
                areaId: 4021
            }, {
                areaname: 'Baiyin District 2',
                areaId: 4022
            }]
        }, {
            cityname: "Dunhuang City",
            cityId: 403,
            areas: [{
                areaname: 'Dunhuang District 1',
                areaId: 4031
            }, {
                areaname: 'Dunhuang District 2',
                areaId: 4032
            }]

        }, {
            cityname: "Dingxi City",
            cityId: 404,
            areas: [{
                areaname: 'Dingxi District 1',
                areaId: 4041
            }, {
                areaname: 'Dingxi District 2',
                areaId: 4042
            }]

        }]
    }
]

demo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/jquery.min.js"></script>
    <script src="js/data.js"></script>
</head>
<body>
    <!-- Add three drop-down lists first-->
    <select name="prov" id="prov">

    </select>
    <select name="city" id="city">

    </select>
    <select name="area" id="area">
        
    </select>
    
    <script>
        var $prov = $("#prov")
        var $city=$("#city")
        var $area=$("#area")

        $(function(){
            //Trigger after the page is loaded$.each(data,function(i,e){
                $prov.append('<option value="'+e.provId+'">'+e.provname+'</option>') //Append the subelement newObj at the end of $obj

            })
            $prov.prepend('<option value="" selected>Please select</option>');
            //When the province name is selected, the following event is triggered $prov.on("change", function(){
                //Traverse the province$.each(data,function(i,e){
                    if($prov.val()==e.provId){  
                        //Traverse the city$city.html('<option value="">Please select</option>');//Used to clear the previously selected city$.each(e.citys,function(i,e2){
                            $city.append('<option value="'+e2.cityId+'">'+e2.cityname+'</option>');
                        })
                            
                    }

                })
            })

            //When the city name is selected, the following event is triggered $city.on("change", function(){
                //Traverse the province$.each(data,function(i,e){
                    if($prov.val()==e.provId){
                        $.each(e.citys,function(i,e2){
                            if($city.val()==e2.cityId){
                                $area.html('<option value="">Please select</option>');
                                $.each(e2.areas,function(i,e3){
                                    $area.append('<option value="'+e3.areaId+'">'+e3.areaname+'</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:

How to use jQuery to manipulate the text and value values of the select drop-down box
jquery multiSelect multiple selection drop-down box
Example analysis of triggering events based on jQuery's select drop-down box selection
Example of getting the selected value of the select drop-down box using jQuery and native JS
jQuery code to get the value of the drop-down box
jQuery dynamically loads select drop-down box sample code
Combobox in jQuery+easyui realizes drop-down box special effects
Jquery operation drop-down box (DropDownList) to achieve value assignment
jQuery implements monitoring of changes in the selected content of the drop-down box
JQuery to achieve cascading drop-down box effect example

<<: Understanding MySQL Locking Based on Update SQL Statements

>>: Apache ab concurrent load stress test implementation method