三級聯(lián)動-jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 三級聯(lián)動-jQuery </title>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
    <select name="" id="province">
        <option value="">請選擇省份</option>
    </select>
    <select name="" id="city">
        <option value="">請選擇城市</option>
    </select>
    <select name="" id="county">
        <option value="">請選擇縣區(qū)</option>
    </select>
    <script type="text/javascript">
        var arrProvince = ["黑龍江","吉林","遼寧","河北","山西"];  // 省
        var arrCity = [     // 市
            ["哈爾濱市","齊齊哈爾市","佳木斯市"],
            ["長春市","吉林市","松原市"],
            ["大連市","本溪市","撫順市"],
            ["保定市","承德市","石家莊市"],
            ["太原市","大同市","長治市"]
        ];
        var arrCounty = [   // 縣區(qū)
            [
                ["延壽縣","通河縣","木蘭縣"],
                ["昂昂溪區(qū)","克東縣","建華區(qū)","富?？h"],
                ["向陽區(qū)","撫遠縣","樺南縣","前進區(qū)"]
            ],[
                ["朝陽區(qū)","農(nóng)安縣","綠園區(qū)","雙陽區(qū)"],
                ["昌邑區(qū) ","永吉縣","舒蘭市 "],
                ["乾安縣","寧江區(qū)","扶余縣","前郭縣"]
            ],[
                ["甘井子","莊河","金州"],
                ["溪湖區(qū)","明山區(qū)","平山區(qū)","南芬區(qū)"],
                ["撫順縣","清原滿族自治縣","新賓滿族自治縣"]
            ],[
                ["南市區(qū)","滿城縣","新市區(qū)","清苑區(qū)"],
                ["興隆縣","平泉縣","隆化縣"],
                ["贊皇縣","元氏縣","無極縣"]
            ],[
                ["迎澤區(qū)","小店區(qū)","清徐縣"],
                ["新榮區(qū)","南郊區(qū)","廣靈縣","左云縣"],
                ["黎城","沁縣","武鄉(xiāng)","壺關(guān)"]
            ]
        ];
        for( var i = 0; i < arrProvince.length; i++ ){
            $("#province").append("<option value=" + i + ">" + arrProvince[i] + "</option>");
        };
        $("#province").change(function(){
            // 下一次選擇之前  清除操作 長度變成 1;使請選擇為默認(rèn)顯示
            $("#city")[0].length = 1;
            // 找到了被選中選擇的省下標(biāo)（下標(biāo)需要去除  請選擇）
            var $indexProvince = $(":selected").val();
            var $city = arrCity[$indexProvince];
            for (var j = 0; j< $city.length ; j++) {
                $("#city").append("<option value=" + $indexProvince + "_" + j + ">"+$city[j]+"</option>");
            };
        });
        $("#city").change(function(){
            // 下一次選擇之前  清除操作 長度變成 1;使請選擇為默認(rèn)顯示
            $("#county")[0].length = 1;
            var str = $("#city :selected").val();
            var arr = str.split("_");
            var $provincIndex = arr[0];
            var $cityIndex = arr[1];
            var $county = arrCounty[$provincIndex][$cityIndex];
            for( var k = 0; k < $county.length; k++ ){
                $("#county").append("<option>" + $county[k] + "</option>")
            };
        });
    </script>
</body>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容