在日常項(xiàng)目開發(fā)階段經(jīng)常見到下拉框二級(jí)聯(lián)動(dòng)效果，尤其是涉及地區(qū)、品種等有多級(jí)選項(xiàng)時(shí)。比如說：常見的省市聯(lián)動(dòng)下拉框，在選擇省份時(shí)，城市列表也會(huì)更隨改變。
思路：
1，所謂聯(lián)動(dòng)效果，是指出發(fā)父級(jí)的數(shù)據(jù)變化時(shí)，會(huì)影響到關(guān)聯(lián)性子級(jí)數(shù)據(jù)元素的變化。
下面是造的省市的數(shù)據(jù)：
var linkDatas = {provinces:[{"code":"0","name":"請(qǐng)選擇"},{"code":"1","name":"北京"},{"code":"2","name":"天津"},{"code":"3","name":"河北"},{"code":"4","name":"湖北"},{"code":"5","name":"廣東"},{"code":"6","name":"其他"}],citys:{0:["請(qǐng)選擇"],1:["朝陽區(qū)","海淀區(qū)","東城區(qū)","西城區(qū)","房山區(qū)","其他"],2:["天津"],3:["滄州","石家莊","秦皇島","其他"],4:["武漢市","宜昌市","襄樊市","其他"],5:["廣州市","深圳市","汕頭市","佛山市","珠海市","其他"],6:["其他"]}};2，根據(jù)數(shù)據(jù)動(dòng)態(tài)生成option節(jié)點(diǎn)：
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，根據(jù)上述省市數(shù)據(jù)，其中code代表“省級(jí)”指向“城市”的標(biāo)識(shí)符，當(dāng)省級(jí)的數(shù)據(jù)變更時(shí)，出發(fā)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>下拉框聯(lián)動(dòng)效果</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":"請(qǐng)選擇"},{"code":"1","name":"北京"},{"code":"2","name":"天津"},{"code":"3","name":"河北"},{"code":"4","name":"湖北"},{"code":"5","name":"廣東"},{"code":"6","name":"其他"}],citys:{0:["請(qǐng)選擇"],1:["朝陽區(qū)","海淀區(qū)","東城區(qū)","西城區(qū)","房山區(qū)","其他"],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}]);/*添加聯(lián)動(dòng)事件*/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);新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
