The second-level linkage effect of the drop-down box is often encountered in daily application scenarios, especially when there are multiple options involving regions, varieties, etc. For example: a common provincial and municipal linkage drop-down box, when selecting a province, the city list will also change more with the changes.
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", "name":"Other" } ], cities:{ 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", "Xiangfan 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" } ], cities:{ 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", "Xiangfan 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'), cities = document.getElementById('citys'); provincesCitysLink(provinces,citys);The above simple implementation code (recommended) of the provincial and municipal linkage effect is all the content I share with you. I hope you can give you a reference and I hope you can support Wulin.com more.