使用jquery怎么实现户籍地选择下拉框

今天就跟大家聊聊有关使用Jquery怎么实现户籍地选择下拉框，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

data.js

var data = [{        provname: '浙江省',        provId: 1,        citys: [{            cityname: "杭州市",            cityId: 101,            areas: [{                    areaname: "杭州一区",                    areaid: 1011                },                {                    areaname: "杭州二区",                    areaId: 1012                }            ]        }, {            cityname: "温州市",            cityId: 102,            areas: [{                areaname: '温州一区',                areaId: 1021            }, {                areaname: '温州二区',                areaId: 1022            }]        }, {            cityname: "宁波市",            cityId: 103,            areas: [{                areaname: '宁波一区',                areaId: 1031            }, {                areaname: '宁波二区',                areaId: 1032            }]        }, {            cityname: "绍兴市",            cityId: 104,            areas: [{                areaname: '绍兴一区',                areaId: 1041            }, {                areaname: '绍兴二区',                areaId: 1042            }]        }]    }, {        provname: '山东省',        provId: 2,        citys: [{            cityname: "济南市",            cityId: 201,            areas: [{                    areaname: "济南一区",                    areaId: 2011                },                {                    areaname: "济南二区",                    areaId: 2012                }            ]        }, {            cityname: "青岛市",            cityId: 202,            areas: [{                areaname: '青岛一区',                areaId: 2021            }, {                areaname: '青岛二区',                areaId: 2022            }]        }, {            cityname: "济宁市",            cityId: 203,            areas: [{                areaname: '济宁一区',                areaId: 2031            }, {                areaname: '济宁二区',                areaId: 2032            }]        }, {            cityname: "潍坊市",            cityId: 204,            areas: [{                areaname: '潍坊一区',                areaId: 2041            }, {                areaname: '潍坊二区',                areaId: 2042            }]        }]    },    {        provname: '广东省',        provId: 3,        citys: [{            cityname: "广州市",            cityId: 301,            areas: [{                    areaname: "广州一区",                    areaId: 3011                },                {                    areaname: "广州二区",                    areaId: 3012                }            ]        }, {            cityname: "潮阳市",            cityId: 302,            areas: [{                areaname: '潮阳一区',                areaId: 3021            }, {                areaname: '潮阳二区',                areaId: 3022            }]        }, {            cityname: "澄海市",            cityId: 303,            areas: [{                areaname: '澄海一区',                areaId: 3031            }, {                areaname: '澄海二区',                areaId: 3032            }]        }, {            cityname: "潮州市",            cityId: 304,            areas: [{                areaname: '潮州一区',                areaId: 3041            }, {                areaname: '潮州二区',                areaId: 3042            }]        }]    },    {        provname: '甘肃省',        provId: 4,        citys: [{            cityname: "兰州市",            cityId: 401,            areas: [{                    areaname: "兰州一区",                    areaId: 4011                },                {                    areaname: "兰州二区",                    areaId: 4012                }            ]        }, {            cityname: "白银市",            cityId: 402,            areas: [{                areaname: '白银一区',                areaId: 4021            }, {                areaname: '白银二区',                areaId: 4022            }]        }, {            cityname: "敦煌市",            cityId: 403,            areas: [{                areaname: '敦煌一区',                areaId: 4031            }, {                areaname: '敦煌二区',                areaId: 4032            }]        }, {            cityname: "定西市",            cityId: 404,            areas: [{                areaname: '定西一区',                areaId: 4041            }, {                areaname: '定西二区',                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>    <!-- 先添加三个下拉列表 -->    <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(){            //页面加载完成后触发            $.each(data,function(i,e){                $prov.append('<option value="'+e.provId+'">'+e.provname+'</option>')   //在$obj的末尾追加子元素newObj            })            $prov.prepend('<option value=""  selected>请选择</option>');            //当省名被选择时，触发以下事件            $prov.on("change",function(){                //遍历省                $.each(data,function(i,e){                    if($prov.val()==e.provId){                          //遍历市                        $city.html('<option value="">请选择</option>');//用来清空之前选择的市                        $.each(e.citys,function(i,e2){                            $city.append('<option value="'+e2.cityId+'">'+e2.cityname+'</option>');                        })                                                }                })            })            //当市名被选择时，触发以下事件            $city.on("change",function(){                //遍历省                $.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="">请选择</option>');                                $.each(e2.areas,function(i,e3){                                    $area.append('<option value="'+e3.areaId+'">'+e3.areaname+'</option>');                                })                            }                        })                    }                })                                })                    })            </script></body></html>

看完上述内容，你们对使用jquery怎么实现户籍地选择下拉框有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注编程网精选频道，感谢大家的支持。