Home >Web Front-end >HTML Tutorial >javascript secondary linkage_html/css_WEB-ITnose
javascript secondary linkage_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:48:001076browse
Second-level linkage can be seen everywhere in general web pages, usually addresses. For example, if you click on Zhejiang Province, Hangzhou City and Jiaxing City will appear; if you click on Beijing Province, Chaoyang and Haidian will appear, and It's not like Hangzhou or Jiaxing.
To achieve this step, you need to use javascript. The principle uses onchange time.
First, the onchange event occurs when the content of the field changes. JavaScript objects that support this event: fileUpload, select, text, textarea. We use select to implement secondary linkage.
The following is the HTML code. First, set one select to be the province, and the second select to be the city. However, for the city, we use an array in js to connect it with the province.
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>javascript二级联动</title></head><body><select id="province"> <option value="-1">省</option> <option value="0">北京</option> <option value="1">浙江</option></select><select id="city"></select><script src="../js/province.js"></script></body></html>
The following is the js code
var province = document.getElementById("province");var city = document.getElementById("city");var area = [['朝阳','海淀','北京'], //第0个area的数组。0{0,1,2}['杭州','海宁'] //第1个area的数组, 1{0.1}]; function choose(){ var opt = ""; var len = area[province.value]; //如果选择北京0，那么，len=[’朝阳‘，’海淀‘] 这个是连接哪个省份对应着哪个市的市的数组 if(province.value == '-1'){ //因为select的value为-1的时候是‘省’这个字，而不是北京，所以，我们选择这个省的时候对应着让他的市为空 city.innerHTML = opt; } for(var i = 0;i < len.length; i++){ //area的数组个数for(i = 0;i < 3; i++) opt = opt + '<option value ="'+ i +'"> '+ len[i]+ '</option>' //opt = "" + <option value = "0">朝阳(lin[0])</option>, //opt = <option value = "0">朝阳(lin[0])</option>, + <option value = "1">海淀(lin[1])</option> //opt = <option value = "0">朝阳(lin[0])</option>, + <option value = "1">海淀(lin[1])</option> + <option value = "2">北京(lin[2])</option> } city.innerHTML = opt;}province.onchange = function(){ choose();}
Second-level linkage can be seen everywhere in general web pages , usually an address. For example, if you click on Zhejiang Province, the cities of Hangzhou and Jiaxing will appear; if you click on Beijing Province, Chaoyang and Haidian will appear instead of Hangzhou and Jiaxing.
To achieve this step, you need to use javascript. The principle uses onchange time.