快捷導(dǎo)航

jquery實現(xiàn)戶籍地選擇下拉框

更新時間：2021年06月01日 14:36:07 作者：WJX+WT

這篇文章主要為大家詳細(xì)介紹了jquery實現(xiàn)戶籍地選擇下拉框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

利用jquery實現(xiàn)戶籍地選擇下拉框的具體代碼，供大家參考，具體內(nèi)容如下

data.js

var data = [{
        provname: '浙江省',
        provId: 1,
        citys: [{
            cityname: "杭州市",
            cityId: 101,
            areas: [{
                    areaname: "杭州一區(qū)",
                    areaId: 1011
                },
                {
                    areaname: "杭州二區(qū)",
                    areaId: 1012
                }
            ]
        }, {
            cityname: "溫州市",
            cityId: 102,
            areas: [{
                areaname: '溫州一區(qū)',
                areaId: 1021
            }, {
                areaname: '溫州二區(qū)',
                areaId: 1022
            }]
        }, {
            cityname: "寧波市",
            cityId: 103,
            areas: [{
                areaname: '寧波一區(qū)',
                areaId: 1031
            }, {
                areaname: '寧波二區(qū)',
                areaId: 1032
            }]

        }, {
            cityname: "紹興市",
            cityId: 104,
            areas: [{
                areaname: '紹興一區(qū)',
                areaId: 1041
            }, {
                areaname: '紹興二區(qū)',
                areaId: 1042
            }]

        }]
    }, {
        provname: '山東省',
        provId: 2,
        citys: [{
            cityname: "濟南市",
            cityId: 201,
            areas: [{
                    areaname: "濟南一區(qū)",
                    areaId: 2011
                },
                {
                    areaname: "濟南二區(qū)",
                    areaId: 2012
                }
            ]
        }, {
            cityname: "青島市",
            cityId: 202,
            areas: [{
                areaname: '青島一區(qū)',
                areaId: 2021
            }, {
                areaname: '青島二區(qū)',
                areaId: 2022
            }]
        }, {
            cityname: "濟寧市",
            cityId: 203,
            areas: [{
                areaname: '濟寧一區(qū)',
                areaId: 2031
            }, {
                areaname: '濟寧二區(qū)',
                areaId: 2032
            }]

        }, {
            cityname: "濰坊市",
            cityId: 204,
            areas: [{
                areaname: '濰坊一區(qū)',
                areaId: 2041
            }, {
                areaname: '濰坊二區(qū)',
                areaId: 2042
            }]

        }]
    },
    {
        provname: '廣東省',
        provId: 3,
        citys: [{
            cityname: "廣州市",
            cityId: 301,
            areas: [{
                    areaname: "廣州一區(qū)",
                    areaId: 3011
                },
                {
                    areaname: "廣州二區(qū)",
                    areaId: 3012
                }
            ]
        }, {
            cityname: "潮陽市",
            cityId: 302,
            areas: [{
                areaname: '潮陽一區(qū)',
                areaId: 3021
            }, {
                areaname: '潮陽二區(qū)',
                areaId: 3022
            }]
        }, {
            cityname: "澄海市",
            cityId: 303,
            areas: [{
                areaname: '澄海一區(qū)',
                areaId: 3031
            }, {
                areaname: '澄海二區(qū)',
                areaId: 3032
            }]

        }, {
            cityname: "潮州市",
            cityId: 304,
            areas: [{
                areaname: '潮州一區(qū)',
                areaId: 3041
            }, {
                areaname: '潮州二區(qū)',
                areaId: 3042
            }]

        }]
    },
    {
        provname: '甘肅省',
        provId: 4,
        citys: [{
            cityname: "蘭州市",
            cityId: 401,
            areas: [{
                    areaname: "蘭州一區(qū)",
                    areaId: 4011
                },
                {
                    areaname: "蘭州二區(qū)",
                    areaId: 4012
                }
            ]
        }, {
            cityname: "白銀市",
            cityId: 402,
            areas: [{
                areaname: '白銀一區(qū)',
                areaId: 4021
            }, {
                areaname: '白銀二區(qū)',
                areaId: 4022
            }]
        }, {
            cityname: "敦煌市",
            cityId: 403,
            areas: [{
                areaname: '敦煌一區(qū)',
                areaId: 4031
            }, {
                areaname: '敦煌二區(qū)',
                areaId: 4032
            }]

        }, {
            cityname: "定西市",
            cityId: 404,
            areas: [{
                areaname: '定西一區(qū)',
                areaId: 4041
            }, {
                areaname: '定西二區(qū)',
                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(){
            //頁面加載完成后觸發(fā)
            $.each(data,function(i,e){
                $prov.append('<option value="'+e.provId+'">'+e.provname+'</option>')   //在$obj的末尾追加子元素newObj

            })
            $prov.prepend('<option value=""  selected>請選擇</option>');
            //當(dāng)省名被選擇時，觸發(fā)以下事件
            $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>');
                        })
                            
                    }

                })
            })

            //當(dāng)市名被選擇時，觸發(fā)以下事件
            $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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: