javascript secondary linkage_html/css_WEB-ITnose-HTML Tutorial-php.cn

javascript secondary linkage_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:48:00

Original

1067 people have browsed it

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>

Copy after login

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();}

Copy after login

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.