關於layui框架下拉框省市兩級聯動
阿新 • • 發佈:2018-12-01
廢話不多說,直接進入正題
第一步,引入相關檔案,具體請移步layui官網文件(https://www.layui.com/doc/)
第二步,在使用下拉框之前,需要在JS宣告form模板
layui.use('form', function(){
var form = layui.form;
第三步,建立兩個下拉框
<label class="layui-form-label">省市:</label> <div class="layui-input-inline" style="padding-right:13px;"> <select name="quiz1" id="selProvince" onchange="provinceChange();" lay-verify="required"></select> </div> <label class="layui-form-label">城市:</label> <div class="layui-input-inline" style="padding-right:14px;"> <select name="quiz2" id="selCity" lay-verify="required"></select> </div>
注意:provinceChange為事件名。
第四步,在JS裡寫方法,以下為程式碼貼上
<script> //定義陣列,儲存省份資訊 var province = ["北京", "上海", "天津", "重慶", "浙江", "江蘇", "廣東", "福建", "湖南", "湖北", "遼寧", "吉林", "黑龍江", "河北", "河南", "山東", "陝西", "甘肅", "新疆", "青海", "山西", "四川", "貴州", "安徽", "江西", "雲南", "內蒙古", "西藏", "廣西", "寧夏", "海南", "香港", "澳門", "臺灣"]; //定義陣列,儲存城市資訊 var beijing = ["東城區", "西城區", "海淀區", "朝陽區", "豐臺區", "石景山區", "通州區", "順義區", "房山區", "大興區", "昌平區", "懷柔區", "平谷區", "門頭溝區", "延慶縣", "密雲縣"]; var shanghai = ["浦東新區", "徐彙區", "長寧區", "普陀區", "閘北區", "虹口區", "楊浦區", "黃浦區", "盧灣區", "靜安區", "寶山區", "閔行區", "嘉定區", "金山區", "松江區", "青浦區", "南匯區", "奉賢區", "崇明縣"]; var tianjing = ["河東", "南開", "河西", "河北", "和平", "紅橋", "東麗", "津南", "西青", "北辰", "塘沽", "漢沽", "大港", "薊縣", "寶坻", "寧河", "靜海", "武清"]; var chongqing = ["渝中區", "大渡口區", "江北區", "沙坪壩區", "九龍坡區", "南岸區", "北碚區", "萬盛區", "雙橋區", "渝北區", "巴南區", "萬州區", "涪陵區", "黔江區", "長壽區", "江津區", "合川區", "永川區", "南川區"]; var jiangsu = ["南京", "無錫", "常州", "徐州", "蘇州", "南通", "連雲港", "淮安", "揚州", "鹽城", "鎮江", "泰州", "宿遷"]; var zhejiang = ["杭州", "寧波", "溫州", "嘉興", "湖州", "紹興", "金華", "衢州", "舟山", "台州", "利水"]; var guangdong = ["廣州", "韶關", "深圳", "珠海", "汕頭", "佛山", "江門", "湛江", "茂名", "肇慶", "惠州", "梅州", "汕尾", "河源", "陽江", "清遠", "東莞", "中山", "潮州", "揭陽"]; var fujiang = ["福州", "廈門", "莆田", "三明", "泉州", "漳州", "南平", "龍巖", "寧德"]; var hunan = ["長沙", "株洲", "湘潭", "衡陽", "邵陽", "岳陽", "常德", "張家界", "益陽", "郴州", "永州", "懷化", "婁底", "湘西土家苗族自治區"]; var hubei = ["武漢", "襄陽", "黃石", "十堰", "宜昌", "鄂州", "荊門", "孝感", "荊州", "黃岡", "咸寧", "隨州", "恩施土家族苗族自治州"]; var liaoning = ["瀋陽", "大連", "鞍山", "撫順", "本溪", "丹東", "錦州", "營口", "阜新", "遼陽", "盤錦", "鐵嶺", "朝陽", "葫蘆島"]; var jilin = ["長春", "吉林", "四平", "遼源", "通化", "白山", "松原", "白城", "延邊朝鮮族自治區"]; var heilongjiang = ["哈爾濱", "齊齊哈爾", "雞西", "牡丹江", "佳木斯", "大慶", "伊春", "黑河", "大興安嶺"]; var hebei = ["石家莊", "保定", "唐山", "邯鄲", "承德", "廊坊", "衡水", "秦皇島", "張家口"]; var henan = ["鄭州", "洛陽", "商丘", "安陽", "南陽", "開封", "平頂山", "焦作", "新鄉", "鶴壁", "許昌", "漯河", "三門峽", "信陽", "周口", "駐馬店", "濟源"]; var shandong = ["濟南", "青島", "菏澤", "淄博", "棗莊", "東營", "煙臺", "濰坊", "濟寧", "泰安", "威海", "日照", "濱州", "德州", "聊城", "臨沂"]; var shangxi = ["西安", "寶雞", "咸陽", "渭南", "銅川", "延安", "榆林", "漢中", "安康", "商洛"]; var gansu = ["蘭州", "嘉峪關", "金昌", "金川", "白銀", "天水", "武威", "張掖", "酒泉", "平涼", "慶陽", "定西", "隴南", "臨夏", "合作"]; var qinghai = ["西寧", "海東地區", "海北藏族自治州", "黃南藏族自治州", "海南藏族自治州", "果洛藏族自治州", "玉樹藏族自治州", "海西蒙古族藏族自治州"]; var xinjiang = ["烏魯木齊", "奎屯", "石河子", "昌吉", "吐魯番", "庫爾勒", "阿克蘇", "喀什", "伊寧", "克拉瑪依", "塔城", "哈密", "和田", "阿勒泰", "阿圖什", "博樂"]; var shanxi = ["太原", "大同", "陽泉", "長治", "晉城", "朔州", "晉中", "運城", "忻州", "臨汾", "呂梁"]; var sichuan = ["成都", "自貢", "攀枝花", "瀘州", "德陽", "綿陽", "廣元", "遂寧", "內江", "樂山", "南充", "眉山", "宜賓", "廣安", "達州", "雅安", "巴中", "資陽", "阿壩藏族羌族自治州", "甘孜藏族自治州", "涼山彝族自治州"]; var guizhou = ["貴陽", "六盤水", "遵義", "安順", "黔南布依族苗族自治州", "黔西南布依族苗族自治州", "黔東南苗族侗族自治州", "銅仁", "畢節"]; var anhui = ["合肥", "蕪湖", "安慶", "馬鞍山", "阜陽", "六安", "滁州", "宿州", "蚌埠", "巢湖", "淮南", "宣城", "亳州", "淮北", "銅陵", "黃山", "池州"]; var jiangxi = ["南昌", "九江", "景德鎮", "萍鄉", "新餘", "鷹潭", "贛州", "宜春", "上饒", "吉安", "撫州"]; var yunnan = ["昆明", "曲靖", "玉溪", "保山", "昭通", "麗江", "普洱", "臨滄", "楚雄彝族自治州", "大理白族自治州", "紅河哈尼族彝族自治州", "文山壯族苗族自治州", "西雙版納傣族自治州", "德巨集傣族景頗族自治州", "怒江傈僳族自治州", "迪慶藏族自治州"]; var neimenggu = ["呼和浩特", "包頭", "烏海", "赤峰", "通遼", "鄂爾多斯", "呼倫貝爾", "巴彥淖爾", "烏蘭察布"]; var guangxi = ["南寧", "柳州", "桂林", "梧州", "北海", "防城港", "欽州", "貴港", "玉林", "百色", "賀州", "河池", "崇左"]; var xizang = ["拉薩", "昌都地區", "林芝地區", "山南地區", "日喀則地區", "那曲地區", "阿里地區"]; var ningxia = ["銀川", "石嘴山", "吳忠", "固原", "中衛"]; var hainan = ["海口", "三亞"]; var xianggang = ["中西區", "灣仔區", "東區", "南區", "九龍城區", "油尖旺區", "觀塘區", "黃大仙區", "深水埗區", "北區", "大埔區", "沙田區", "西貢區", "元朗區", "屯門區", "荃灣區", "葵青區", "離島區"]; var taiwan = ["臺北", "高雄", "基隆", "臺中", "臺南", "新竹", "嘉義"]; var aomeng = ["澳門半島", "氹仔島", "路環島"]; //頁面載入方法 $(function () { layui.use('form', function () { form = layui.form; //各種基於事件的操作,下面會有進一步介紹 //設定省份資料 setProvince(); //監聽下拉事件 form.on('select', function (data) { setCity(data.value); }); }); }); //設定省份資料 function setProvince() { //給省份下拉列表賦值 var $sel = $("#selProvince"); //獲取對應省份城市 for (var i = 0, len = province.length; i < len; i++) { modelVal = province[i]; var option = $("<option value='" + province[i] + "'>" + province[i] + "</option>"); //新增到 select 元素中 $sel.append(option); } form.render('select'); setCity($($sel.get(0)).val()); } //根據選中的省份獲取對應的城市 function setCity(provinec) { var $city = $("#selCity"); var proCity, option, modelVal; //通過省份名稱,獲取省份對應城市的陣列名 switch (provinec) { case "北京": proCity = beijing; break; case "上海": proCity = shanghai; break; case "天津": proCity = tianjing; break; case "重慶": proCity = chongqing; break; case "浙江": proCity = zhejiang; break; case "江蘇": proCity = jiangsu; break; case "廣東": proCity = guangdong; break; case "福建": proCity = fujiang; break; case "湖南": proCity = hunan; break; case "湖北": proCity = hubei; break; case "遼寧": proCity = liaoning; break; case "吉林": proCity = jilin; break; case "黑龍江": proCity = heilongjiang; break; case "河北": proCity = hebei; break; case "河南": proCity = henan; break; case "山東": proCity = shandong; break; case "陝西": proCity = shangxi; break; case "甘肅": proCity = gansu; break; case "新疆": proCity = xinjiang; break; case "青海": proCity = qinghai; break; case "山西": proCity = shanxi; break; case "四川": proCity = sichuan; break; case "貴州": proCity = guizhou; break; case "安徽": proCity = anhui; break; case "江西": proCity = jiangxi; break; case "雲南": proCity = yunnan; break; case "內蒙古": proCity = neimenggu; break; case "西藏": proCity = xizang; break; case "廣西": proCity = guangxi; break; case "寧夏": proCity = ningxia; break; case "海南": proCity = hainan; break; case "香港": proCity = xianggang; break; case "澳門": proCity = aomeng; break; case "臺灣": proCity = taiwan; break; } //先清空之前繫結的值 $city.empty(); //設定對應省份的城市 for (var i = 0, len = proCity.length; i < len; i++) { modelVal = proCity[i]; option = "<option value='" + modelVal + "'>" + modelVal + "</option>"; //新增 $city.append(option); } form.render('select'); } </script>
需要注意的是,在layui框架裡,每當給下拉框賦值的時候,必須要給select元件重新整理,否則無法取值。form.render(‘select’);為重新整理select選擇框渲染,在每個邏輯判斷輸出之前必須要重新整理
最後效果圖為
以上僅供參考學習