jQuery實現(xiàn)省市級聯(lián)

1.首先在body頁面中定義好對應(yīng)的select多選菜單并且定義對應(yīng)的id便于選擇器選擇
在selelct下option中給與value定義參照值便于之后的循環(huán)迭代。

<body>
省份:<select id="provence">
    <option value="0" name="provence">--請選擇--</option>
    <option value="1" name="provence">河南省</option>
    <option value="2" name="provence">安徽省</option>
    <option value="3" name="provence">江蘇省</option>
    <option value="4" name="provence">河北省</option>
    <option value="5" name="provence">湖南省</option>
</select>
城市:<select id="city">
    <option value="0" name="city">--請選擇--</option>
</select>
</body>

2.定義一個二維數(shù)組用來裝城市的集合堪藐。并通過基本選擇器找到對應(yīng)的標(biāo)簽元素匀哄,拿到對應(yīng)標(biāo)簽元素后通過之前定義的value值作為參照迭代出對應(yīng)的二維數(shù)組的城市內(nèi)容。(期間一定要記得每次迭代前清空一次市級中的內(nèi)容抱究,防止內(nèi)容疊加)

 $(function () {//入口函數(shù)
        //獲得城市對象的下拉框
        var $city = $("#city");
        //  創(chuàng)建二維數(shù)組來表示城市恢氯,注意對應(yīng)關(guān)系
        var citys = [
            ["--請選擇--"],
            ["商丘市", "鹿邑縣", "許昌市", "開封市", "鄭州市"],
            ["合肥市", "淮南市", "馬鞍山市", "六安市", "亳州市"],
            ["南京市", "蘇州市", "揚州市"],
            ["滄州市", "泊頭市", "天津市"],
            ["長沙市", "岳陽市", "衡陽市","株洲市","邵陽市"]
        ];

  $("#provence").change(function () {
            console.log($city.get(0));
            $city.get(0).length = 0;
            var val = this.value;
            console.log(val);
            $.each(citys, function (i, n) {//代表二維數(shù)組的下標(biāo),代表二維數(shù)組中更具體的內(nèi)容
                if (val == i) { //判斷
                    $(n).each(function (j, m) {//j代表每個二維數(shù)組中一維數(shù)組內(nèi)容的下表鼓寺,m代表一維數(shù)組的內(nèi)容
                        //創(chuàng)建對象勋拟,并且添加到城市下拉框中
                        $city.append("<option name='city'>" + m + "</option>")
                    });
                }
            });
        });
    });
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市妈候,隨后出現(xiàn)的幾起案子敢靡,更是在濱河造成了極大的恐慌,老刑警劉巖苦银,帶你破解...
    沈念sama閱讀 212,454評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件啸胧,死亡現(xiàn)場離奇詭異赶站,居然都是意外死亡,警方通過查閱死者的電腦和手機纺念,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,553評論 3 385
  • 文/潘曉璐 我一進店門贝椿,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人陷谱,你說我怎么就攤上這事烙博。” “怎么了烟逊?”我有些...
    開封第一講書人閱讀 157,921評論 0 348
  • 文/不壞的土叔 我叫張陵渣窜,是天一觀的道長。 經(jīng)常有香客問我宪躯,道長乔宿,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,648評論 1 284
  • 正文 為了忘掉前任眷唉,我火速辦了婚禮予颤,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘冬阳。我一直安慰自己蛤虐,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 65,770評論 6 386
  • 文/花漫 我一把揭開白布肝陪。 她就那樣靜靜地躺著驳庭,像睡著了一般。 火紅的嫁衣襯著肌膚如雪氯窍。 梳的紋絲不亂的頭發(fā)上饲常,一...
    開封第一講書人閱讀 49,950評論 1 291
  • 那天,我揣著相機與錄音狼讨,去河邊找鬼贝淤。 笑死,一個胖子當(dāng)著我的面吹牛政供,可吹牛的內(nèi)容都是我干的播聪。 我是一名探鬼主播,決...
    沈念sama閱讀 39,090評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼布隔,長吁一口氣:“原來是場噩夢啊……” “哼离陶!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起衅檀,我...
    開封第一講書人閱讀 37,817評論 0 268
  • 序言:老撾萬榮一對情侶失蹤招刨,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后哀军,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體沉眶,經(jīng)...
    沈念sama閱讀 44,275評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡打却,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,592評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了沦寂。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片学密。...
    茶點故事閱讀 38,724評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖传藏,靈堂內(nèi)的尸體忽然破棺而出腻暮,到底是詐尸還是另有隱情,我是刑警寧澤毯侦,帶...
    沈念sama閱讀 34,409評論 4 333
  • 正文 年R本政府宣布哭靖,位于F島的核電站,受9級特大地震影響侈离,放射性物質(zhì)發(fā)生泄漏试幽。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 40,052評論 3 316
  • 文/蒙蒙 一卦碾、第九天 我趴在偏房一處隱蔽的房頂上張望铺坞。 院中可真熱鬧,春花似錦洲胖、人聲如沸济榨。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,815評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽擒滑。三九已至,卻和暖如春叉弦,著一層夾襖步出監(jiān)牢的瞬間丐一,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,043評論 1 266
  • 我被黑心中介騙來泰國打工淹冰, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留库车,地道東北人。 一個月前我還...
    沈念sama閱讀 46,503評論 2 361
  • 正文 我出身青樓樱拴,卻偏偏與公主長得像凝颇,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子疹鳄,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,627評論 2 350

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