div模擬select省市二級聯動
阿新 • • 發佈：2019-01-26
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .clearfix:before, .clearfix:after { content: '.'; display: block; visibility: hidden; font-size: 0; line-height: 0; width: 0; height: 0; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } li { display: list-item; } .w600{ width: 600px; } .h40 { height: 40px; } .f15 { font-size: 15px; } .mt30 { margin-top: 30px; } .w88 { width: 88px; } .lh40 { line-height: 40px; } .index_mask_select_all { width: 243px; height: 38px; line-height: 38px; border: 1px solid #dddddd; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAHCAMAAAAPmYwrAAAAS1BMVEUAAACvr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6+vr6/3il+gAAAAGXRSTlMA/tgSvzTn5WJIIR8J9PLMxsSzrpyNgHY5DIV4XwAAAEZJREFUCNdFjEcOgDAQA70tnV7//1IUIogv9kjWYNrx51BctJYGZaMTCDRLJVko1I4jZyDzENvLnLfbO/sUiYk4daWoyjseZBoBkjjWZkkAAAAASUVORK5CYII=); background-repeat: no-repeat; background-position: 218px center; cursor: pointer; } .rel { position: relative; } .fl { float: left; } .fr { float: right; } .index_mask_select { width: 223px; height: 38px; padding: 0 10px; } .index_mask_list { width: 243px; border-left: 1px solid #dddddd; border-right: 1px solid #dddddd; border-bottom: 1px solid #dddddd; left: -1px; top: 39px; display: none; background-color: #fff; height: 350px; overflow-y: scroll; } .abs { position: absolute; } .index_mask_li { padding: 0 10px; height: 35px; line-height: 35px; background-color: #fff; } </style> </head> <body> <div class="clearfix f15 mt30 h40 w600"> <div class="fl index_mask_label w88 lh40">所在地：</div> <div class="index_mask_select_all rel fl"> <div class="index_mask_select" id="index_mask_select_city">請選擇</div> <ul class="index_mask_list abs index_mask_list_city"> <li class="index_mask_li" selectedindex="0">北京市</li> <li class="index_mask_li" selectedindex="1">天津市</li> </ul> </div> <div class="index_mask_select_all rel fr"> <div class="index_mask_select" id="index_mask_select_area">請選擇</div> <ul class="index_mask_list abs index_mask_list_area"> <li class="index_mask_li">朝陽</li> </ul> </div> </div> <script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="config.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //一進入頁面立馬渲染城市和地區 var city_str = ''; for(var i = 0; i < provinceArr.length; i++) { city_str += '<li class="index_mask_li" selectedIndex=' + i + '>' + provinceArr[i] + '</li>'; } //放到相應的位置 $(".index_mask_list_city").html(city_str); //省 $("#index_mask_select_city").on("click", function(e) { $(".index_mask_list_city").css({ "display": "block" }); //阻止預設事件 stopPropagation(e); }); //市 $("#index_mask_select_area").on("click", function(e) { $(".index_mask_list_area").css({ "display": "block" }); stopPropagation(e); }); //省份點選select時進行選擇(同時進行模擬,select的onchange事件) $(".index_mask_list_city li").on("click", function() { $("#index_mask_select_area").html("請選擇"); var key_value = $(this).attr("selectedindex"); $("#index_mask_select_city").html($(this).html()); $(".index_mask_list_city").css({ "display": "none" }); var html = ''; $.each(cityArr[key_value], function(i, n) { html += '<li class="index_mask_li" selectedIndex=' + i + '>' + n + '</li>'; }) $(".index_mask_list_area").html(html); }); //市點選，賦值到相應位置，同時進行顯示隱藏操作（li是新生成元素，需要使用事件委託進行書寫） $(".index_mask_list_area").on("click", "li", function() { $("#index_mask_select_area").html($(this).html()); //console.log($(this).html()) $(".index_mask_list_area").css({ "display": "none" }); }); //點選空白處，下拉框收起 $(document).bind("click", function() { $(".index_mask_list").css({ "display": "none" }); }); //阻止預設事件 function stopPropagation(e) { if(e.stopPropagation) { e.stopPropagation(); } else { e.cancelBubble = true; } } </script> </body> </html>
2.config.js省市的配置檔案
/*省份*/ var provinceArr = []; provinceArr[0] = ['北京市']; provinceArr[1] = ['天津市']; provinceArr[2] = ['上海市']; provinceArr[3] = ['重慶市']; provinceArr[4] = ['河北省']; provinceArr[5] = ['河南省']; provinceArr[6] = ['雲南省']; provinceArr[7] = ['遼寧省']; provinceArr[8] = ['黑龍江省']; provinceArr[9] = ['湖南省']; provinceArr[10] = ['安徽省']; provinceArr[11] = ['山東省']; provinceArr[12] = ['新疆維吾爾自治區']; provinceArr[13] = ['江蘇省']; provinceArr[14] = ['浙江省']; provinceArr[15] = ['江西省']; provinceArr[16] = ['湖北省']; provinceArr[17] = ['廣西壯族']; provinceArr[18] = ['甘肅省']; provinceArr[19] = ['山西省']; provinceArr[20] = ['內蒙古自治區']; provinceArr[21] = ['陝西省']; provinceArr[22] = ['吉林省']; provinceArr[23] = ['福建省']; provinceArr[24] = ['貴州省']; provinceArr[25] = ['廣東省']; provinceArr[26] = ['青海省']; provinceArr[27] = ['西藏']; provinceArr[28] = ['四川省']; provinceArr[29] = ['寧夏回族']; provinceArr[30] = ['海南省']; provinceArr[31] = ['臺灣省']; provinceArr[32] = ['香港特別行政區']; provinceArr[33] = ['澳門特別行政區']; /*市縣,每個陣列第一個元素為省份,其他的為這個省份下的市縣*/ var cityArr = []; cityArr[0] = ['北京市', '東城區', '西城區', '崇文區', '宣武區', '朝陽區', '豐臺區', '石景山區', '海淀區', '門頭溝區', '房山區', '通州區', '順義區', '昌平區', '大興 區', '懷柔區', '平谷區', '密雲縣', '延慶縣']; cityArr[1] = ['天津市', '和平區', '河東區', '河西區', '南開區', '河北區', '紅橋區', '塘沽區', '漢沽區', '大港區', '東麗區', '西青區', '津南區', '北辰區', '武清區', '寶坻區', '寧河縣', '靜海縣', '薊縣']; cityArr[2] = ['上海市', '黃浦區', '盧灣區', '徐彙區', '長寧區', '靜安區', '普陀區', '閘北區', '虹口區', '楊浦區', '閔行區', '寶山區', '嘉定區', '浦東新區', '金山區', '松江區', '青浦區', '南匯區', '奉賢區', '崇明縣']; cityArr[3] = ['重慶市', '萬州區', '涪陵區', '渝中區', '大渡口區', '江北區', '沙坪壩區', '九龍坡區', '南岸區', '北碚區', '萬盛區', '雙橋區', '渝北區', '巴南區', '黔江區', '長壽區', '江津區', '合川區', '永川區', '南川區', '綦江縣', '潼南縣', '銅梁縣', '大足縣', '榮昌縣', '璧山縣', '梁平縣', '城口縣', '豐都縣', '墊江縣', '武隆縣', '忠縣', '開縣', '雲陽縣', '奉節縣', '巫山縣', '巫溪縣', '石柱土家族自治縣', '秀山土家族苗族自治縣', '酉陽土家族苗族自治縣', '彭水苗族土家族自治縣']; cityArr[4] = ['河北省', '石家莊市', '唐山市', '秦皇島市', '邯鄲市', '邢臺市', '保定市', '張家口市', '承德市', '滄州市', '廊坊市', '衡水市']; cityArr[5] = ['河南省', '鄭州市', '開封市', '洛陽市', '平頂山市', '安陽市', '鶴壁市', '新鄉市', '焦作市', '濟源市', '濮陽市', '許昌市', '漯河市', '三門峽市', '南陽市', '商丘市', '信陽市', '周口市', '駐馬店市']; cityArr[6] = ['雲南省', '昆明市', ' 曲靖市', '玉溪市', '保山市', '昭通市', '麗江市', '思茅市', '臨滄市', '楚雄彝族自治州', '紅河哈尼族彝族自治州', '文山壯族苗族自治州', '西雙版納傣族自治州', '大理白族自治州', '德巨集傣族景頗族自治州', '怒江傈僳族自治州', '迪慶藏族自治州']; cityArr[7] = ['遼寧省', '瀋陽市', '大連市', '鞍山市', '撫順市', '本溪市', '丹東市', '錦州市', '營口市', '阜新市', '遼陽市', '盤錦市', '鐵嶺市', '朝陽市', '葫蘆島市']; cityArr[8] = ['黑龍江省', '哈爾濱市', '齊齊哈爾市', '雞西市', '鶴崗市', '雙鴨山市', '大慶市', '伊春市', '佳木斯市', '七臺河市', '牡丹江市', '黑河市', '綏化市', '大興安嶺地區']; cityArr[9] = ['湖南省', '長沙市', '株洲市', '湘潭市', '衡陽市', '邵陽市', '岳陽市', '常德市', '張家界市', '益陽市', '郴州市', '永州市', '懷化市', '婁底市', '湘西土家族苗族自治州']; cityArr[10] = ['安徽省', '合肥市', '蕪湖市', '蚌埠市', '淮南市', '馬鞍山市', '淮北市', '銅陵市', '安慶市', '黃山市', '滁州市', '阜陽市', '宿州市', '巢湖市', '六安市', '亳州市', '池州', '宣城市']; cityArr[11] = ['山東省', '濟南市', '青島市', '淄博市', '棗莊市', '東營市', '煙臺市', '濰坊市', '濟寧市', '泰安市', '威海市', '日照市', '萊蕪市', '臨沂市', '德州市', '聊城市', '濱州市', '菏澤市']; cityArr[12] = ['新疆維吾爾自治區', '烏魯木齊市', '克拉瑪依市', '吐魯番地區', '哈密地區', '昌吉回族自治州 ', '博爾塔拉蒙古自治州 ', '巴音郭楞蒙古自治州 ', '阿克蘇地區', '克孜勒蘇柯爾克孜自治州 ', '喀什地區', '和田地區', '伊犁哈薩克自治州', '塔城地區', '阿勒泰地區', '石河子市', '阿拉爾市', '圖木舒克市', '五家渠市']; cityArr[13] = ['江蘇省', '南京市', '無錫市', '徐州市', '常州市', '蘇州市', '南通市', '連雲港市', '淮安市', '鹽城市', '揚州市', '鎮江市', '泰州市', '宿遷市']; cityArr[14] = ['浙江省', '杭州市', '寧波市', '溫州市', '嘉興市', '湖州市', '紹興市', '金華市', '衢州市', '舟山市', '台州市', '麗水市']; cityArr[15] = ['江西省', '南昌市', '景德鎮市', '萍鄉市', '九江市', '新餘市', '鷹潭市', '贛州市', '吉安市', '宜春市', '撫州市', '上饒市']; cityArr[16] = ['湖北省', '武漢市', '黃石市', '十堰市', '宜昌市', '襄樊市', '鄂州市', '荊門市', '孝感市', '荊州市', '黃岡市', '咸寧市', '隨州市', '恩施土家族苗族自治州', '仙桃市', '潛江市', '天門市', '神農架林區']; cityArr[17] = ['廣西壯族', '南寧市', '柳州市', '桂林市', '梧州市', '北海市', '防城港市', '欽州市', '貴港市', '玉林市', '百色市', '賀州市', '河池市', '來賓市', '崇左市']; cityArr[18] = ['甘肅省', '蘭州市', '嘉峪關市', '金昌市', '白銀市', '天水市', '武威市', '張掖市', '平涼市', '酒泉市', '慶陽市', '定西市', '隴南市', '臨夏回族自治州', '甘南藏族自治州']; cityArr[19] = ['山西省', '太原市', '大同市', '陽泉市', '長治市', '晉城市', '朔州市', '晉中市', '運城市', '忻州市', '臨汾市', '呂梁市']; cityArr[20] = ['內蒙古自治區', '呼和浩特市', '包頭市', '烏海市', '赤峰市', '通遼市', '鄂爾多斯市', '呼倫貝爾市', '巴彥淖爾市', '烏蘭察布市', '興安盟', '錫林郭勒盟', '阿拉善盟']; cityArr[21] = ['陝西省', '西安市', '銅川市', '寶雞市', '咸陽市', '渭南市', '延安市', '漢中市', '榆林市', '安康市', '商洛市']; cityArr[22] = ['吉林省', '長春市', '吉林市', '四平市', '遼源市', '通化市', '白山市', '松原市', '白城市', '延邊朝鮮族自治州']; cityArr[23] = ['福建省', '福州市', '廈門市', '莆田市', '三明市', '泉州市', '漳州市', '南平市', '龍巖市', '寧德市']; cityArr[24] = ['貴州省', '貴陽市', '六盤水市', '遵義市', '安順市', '銅仁地區', '黔西南布依族苗族自治州', '畢節地區', '黔東南苗族侗族自治州', '黔南布依族苗族自治州']; cityArr[25] = ['廣東省', '廣州市', '韶關市', '深圳市', '珠海市', '汕頭市', '佛山市', '江門市', '湛江市', '茂名市', '肇慶市', '惠州市', '梅州市', '汕尾市', '河源市', '陽江市', '清遠市', '東莞市', '中山市', '潮州市', '揭陽市', '雲浮市']; cityArr[26] = ['青海省', '西寧市', '海東地區', '海北藏族自治州', '黃南藏族自治州', '海南藏族自治州', '果洛藏族自治州', '玉樹藏族自治州', '海西蒙古族藏族自治州']; cityArr[27] = ['西藏', '拉薩市', '昌都地區', '山南地區', '日喀則地市', '那曲地區', '阿里地區', '林芝地區']; cityArr[28] = ['四川省', '成都市', '自貢市', '攀枝花市', '瀘州市', '德陽市', '綿陽市', '廣元市', '遂寧市', '內江市', '樂山市', '南充市', '眉山市', '宜賓市', '廣安市', '達州市', '雅安市', '巴中市', '資陽市', '阿壩藏族羌族自治州', '甘孜藏族自治州', '涼山彝族自治州']; cityArr[29] = ['寧夏回族', '銀川市', '石嘴山市', '吳忠市', '固原市', '中衛市']; cityArr[30] = ['海南省', '海口市', '三亞市', '五指山市', '瓊海市', '儋州市', '文昌市', '萬寧市', '東方市', '定安縣', '屯昌縣', '澄邁縣', '臨高縣', '白沙黎族自治縣', '昌江黎族自治縣', '樂東黎族自治縣', '陵水黎族自治縣', '保亭黎族苗族自治縣', '瓊中黎族苗族自治縣']; cityArr[31] = ['臺灣省', '臺北市', '高雄市', '基隆市', '臺中市', '臺南市', '新竹市', '嘉義市']; cityArr[32] = ['香港特別行政區', '中西區', '灣仔區', '東區', '南區', '油尖旺區', '深水埗區', '九龍城區', '黃大仙區', '觀塘區', '荃灣區', '葵青區', '沙田區', '西貢區', '大埔區', '北區', '元朗區', '屯門區', '離島區']; cityArr[33] = ['澳門特別行政區', '澳門'];
3.效果
