During the daily project development stage, the second-level linkage effect of the drop-down box is often seen, especially when there are multiple options involving regions, varieties, etc. For example: a common provincial and municipal linkage drop-down box will change more when selecting a province.
Ideas:
1. The so-called linkage effect points out that when the data changes at the parent level will affect the changes of the associated child level data elements.
Below are the data of the provinces and cities that have been built:
var linkDatas = {provinces:[{"code":"0","name":"Please select"},{"code":"1","name":"Beijing"},{"code":"2","name":"Tianjin"},{"code":"3","name":"Hebei"},{"code":"4","name":"Hubei"},{"code":"5","name":"Guangdong"},{"code":"6","na me":"Other"}],citys:{0:["Please select"],1:["Chaoyang District","Haidian District","Dongcheng District","Xicheng District","Fangshan District","Other"],2:["Tianjin"],3:["Cangzhou","Shijiazhuang","Qinhuangdao","Other"],4:["Wuhan City","Yichang City","Xifan City","Other"],5:["Guangzhou City","Shenzhen City","Shantou City","Foshan City","Zhuhai City","Other"],6:["Other"]}};2. Dynamically generate option nodes based on data:
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. According to the above-mentioned provincial and municipal data, the code represents the identifier that points to the "provincial level" and when the provincial data changes, the change event starts:
pro.onchange = function(){console.log(this);var ct = city[this.value],ctLen = ct.length,ctBox = [];c.innerHTML = ""; /*Add city*/ for(var j = 0;j < ctLen;j++){ctBox.push({"text" : ct[j],"value": ct[j]});}addOptions(c,ctBox);}HTML code:
<div><h3>Pull down box linkage effect</h3><p>Province: <select name="provinces" id="provinces"></select></p><p>City: <select name="citys" id="citys"></select></p></div>
All JavaScript code:
var linkDatas = {provinces:[{"code":"0","name":"Please select"},{"code":"1","name":"Beijing"},{"code":"2","name":"Tianjin"},{"code":"3","name":"Hebei"},{"code":"4","name":"Hubei"},{"code":"5","name":"Guangdong"},{"code":"6","name": "Other"}],citys:{0:["Please select"],1:["Chaoyang District","Haidian District","Dongcheng District","Xicheng District","Fangshan District","Other"],2:["Tianjin"],3:["Cangzhou","Shijiazhuang","Qinhuangdao","Other"],4:["Wuhan City","Yichang City","Xifan City","Other"],5:["Guangzhou City","Shenzhen City","Shantou City","Foshan City","Zhuhai City","Other"],6:["Other"]}};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 = [];/*Add province*/for(var i = 0;i < provinces.length;i++){proBox.push({"text" : provinces[i].name,"value": provinces[i].code})} addOptions(pro,proBox);/*Initialize the city*/addOptions(c,[{"text" : initCity,"value": initCity}]);/*Add linkage event*/pro.onchange = function(){console.log(this);var ct = city[this.value],ctLen = ct.length,ctBox = [];c.innerHTML = ""; /*Add city*/ 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);