下拉框二級聯動效果在日常應用場景中經常會碰到，尤其是涉及地區、品種等有多級選項時。例如：常見的省市聯動下拉框，在選擇省份時，城市列表也會更隨改變。 思路： 1，所謂聯動效果，是指出發父級的數據變化時，會影響到關聯性子級數據元素的變化。 下麵是造的省市的數據： var linkDatas = { pr ...
下拉框二級聯動效果在日常應用場景中經常會碰到，尤其是涉及地區、品種等有多級選項時。例如：常見的省市聯動下拉框，在選擇省份時，城市列表也會更隨改變。
思路：
1，所謂聯動效果，是指出發父級的數據變化時，會影響到關聯性子級數據元素的變化。
下麵是造的省市的數據：
var linkDatas = { provinces:[ { "code":"0", "name":"請選擇" }, { "code":"1", "name":"北京" }, { "code":"2", "name":"天津" }, { "code":"3", "name":"河北" }, { "code":"4", "name":"湖北" }, { "code":"5", "name":"廣東" }, { "code":"6", "name":"其他" } ], citys:{ 0:[ "請選擇" ], 1:[ "朝陽區", "海澱區", "東城區", "西城區", "房山區", "其他" ], 2:[ "天津" ], 3:[ "滄州", "石家莊", "秦皇島", "其他" ], 4:[ "武漢市", "宜昌市", "襄樊市", "其他" ], 5:[ "廣州市", "深圳市", "汕頭市", "佛山市", "珠海市", "其他" ], 6:[ "其他" ] } };View Code
2，根據數據動態生成option節點：
function addOptions(target,options){ var optionEle = null, target = target, option = options, optionLen = options.length; for(var i = 0;i < optionLen;i++){ optionEle = document.createElement('option'); optionEle.value = option[i].value; optionEle.text = option[i].text; target.options.add(optionEle); } }
3，根據上述省市數據，其中code代表“省級”指向“城市”的標識符，當省級的數據變更時，出發change事件：
pro.onchange = function(){ console.log(this); var ct = city[this.value], ctLen = ct.length, ctBox = []; c.innerHTML = ""; /*添加城市*/ for(var j = 0;j < ctLen;j++){ ctBox.push({ "text" : ct[j], "value": ct[j] }); } addOptions(c,ctBox); }
HTML代碼：
<div class="content"> <h3>下拉框聯動效果</h3> <p>省份： <select name="provinces" id="provinces"> </select> </p> <p> 市： <select name="citys" id="citys"> </select> </p> </div>
全部JavaScript代碼：
var linkDatas = { provinces:[ { "code":"0", "name":"請選擇" }, { "code":"1", "name":"北京" }, { "code":"2", "name":"天津" }, { "code":"3", "name":"河北" }, { "code":"4", "name":"湖北" }, { "code":"5", "name":"廣東" }, { "code":"6", "name":"其他" } ], citys:{ 0:[ "請選擇" ], 1:[ "朝陽區", "海澱區", "東城區", "西城區", "房山區", "其他" ], 2:[ "天津" ], 3:[ "滄州", "石家莊", "秦皇島", "其他" ], 4:[ "武漢市", "宜昌市", "襄樊市", "其他" ], 5:[ "廣州市", "深圳市", "汕頭市", "佛山市", "珠海市", "其他" ], 6:[ "其他" ] } }; function addOptions(target,options){ var optionEle = null, target = target, option = options, optionLen = options.length; for(var i = 0;i < optionLen;i++){ optionEle = document.createElement('option'); optionEle.value = option[i].value; optionEle.text = option[i].text; target.options.add(optionEle); } } function provincesCitysLink(pro,c){ var LD = linkDatas, provinces = LD.provinces, city = LD.citys, initCity = city[0], proBox = []; /*添加省份*/ for(var i = 0;i < provinces.length;i++){ proBox.push({ "text" : provinces[i].name, "value": provinces[i].code }) } addOptions(pro,proBox); /*初始化城市*/ addOptions(c,[{ "text" : initCity, "value": initCity }]); /*添加聯動事件*/ pro.onchange = function(){ console.log(this); var ct = city[this.value], ctLen = ct.length, ctBox = []; c.innerHTML = ""; /*添加城市*/ for(var j = 0;j < ctLen;j++){ ctBox.push({ "text" : ct[j], "value": ct[j] }); } addOptions(c,ctBox); } } var provinces = document.getElementById('provinces'), citys = document.getElementById('citys'); provincesCitysLink(provinces,citys);
DEMO演示：CLICK ME！
