三級聯(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ū)","富宰佳瑁縣"],
                ["向陽區(qū)","撫遠(yuǎn)縣","樺南縣","前進區(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>

最后編輯于：2017.12.05 12:21:30

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖酌摇，帶你破解...
沈念sama閱讀 218,941評論 6贊 508
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件澄阳，死亡現(xiàn)場離奇詭異斗遏，居然都是意外死亡脆炎，警方通過查閱死者的電腦和手機梅猿，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,397評論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來秒裕，“玉大人袱蚓，你說我怎么就攤上這事〖蛤撸” “怎么了喇潘？”我有些...
開封第一講書人閱讀 165,345評論 0贊 356
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長梭稚。經(jīng)常有香客問我颖低，道長，這世上最難降的妖魔是什么弧烤？我笑而不...
開封第一講書人閱讀 58,851評論 1贊 295
?港島之戀（遺憾婚禮）
正文為了忘掉前任枫甲，我火速辦了婚禮，結(jié)果婚禮上扼褪，老公的妹妹穿的比我還像新娘想幻。我一直安慰自己，他們只是感情好话浇，可當(dāng)我...
茶點故事閱讀 67,868評論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布脏毯。她就那樣靜靜地躺著，像睡著了一般幔崖。火紅的嫁衣襯著肌膚如雪食店。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 51,688評論 1贊 305
城市分裂傳說
那天赏寇，我揣著相機與錄音吉嫩，去河邊找鬼。笑死嗅定，一個胖子當(dāng)著我的面吹牛自娩，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播渠退，決...
沈念sama閱讀 40,414評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼忙迁，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了碎乃？” 一聲冷哼從身側(cè)響起姊扔，我...
開封第一講書人閱讀 39,319評論 0贊 276
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎梅誓，沒想到半個月后恰梢，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體佛南，經(jīng)...
沈念sama閱讀 45,775評論 1贊 315
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 37,945評論 3贊 336
?白月光啟示錄
正文我和宋清朗相戀三年嵌言，在試婚紗的時候發(fā)現(xiàn)自己被綠了嗅回。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 40,096評論 1贊 350
活死人
序言：一個原本活蹦亂跳的男人離奇死亡呀页，死狀恐怖妈拌，靈堂內(nèi)的尸體忽然破棺而出拥坛，到底是詐尸還是另有隱情蓬蝶，我是刑警寧澤，帶...
沈念sama閱讀 35,789評論 5贊 346
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布猜惋，位于F島的核電站丸氛，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏著摔。R本人自食惡果不足惜缓窜，卻給世界環(huán)境...
茶點故事閱讀 41,437評論 3贊 331
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望谍咆。院中可真熱鬧禾锤，春花似錦、人聲如沸摹察。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,993評論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽供嚎。三九已至黄娘，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間克滴，已是汗流浹背逼争。一陣腳步聲響...
開封第一講書人閱讀 33,107評論 1贊 271
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留劝赔，地道東北人誓焦。一個月前我還...
沈念sama閱讀 48,308評論 3贊 372
代替公主和親
正文我出身青樓，卻偏偏與公主長得像着帽，于是被迫代替她去往敵國和親罩阵。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 45,037評論 2贊 355

三級聯(lián)動-jQuery

推薦閱讀更多精彩內(nèi)容