Second-level linkages can be seen everywhere in general web pages, usually with addresses, such as clicking on Zhejiang Province, followed by Hangzhou City and Jiaxing City; clicking on Beijing Province, Chaoyang and Haidian, instead of Hangzhou and Jiaxing.
To implement this step, you need to use javascript to implement it. The principle uses onchange time.
First, the onchange event occurs when the content of the domain changes. JavaScript objects that support this event: fileUpload, select, text, textarea. We use select to complete the implementation of secondary linkage.
The following is the HTML code. First, set a select as a province and the second select as a city, but we use an array in js to connect it with the province.
The code copy is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>javascript secondary linkage</title>
</head>
<body>
<select id="province">
<option value="-1">Subject</option>
<option value="0">Beijing</option>
<option value="1">Zhejiang</option>
</select>
<select id="city">
</select>
<script src="../js/province.js"></script>
</body>
</html>
The following is the js code
The code copy is as follows:
var province = document.getElementById("province");
var city = document.getElementById("city");
var area = [
['Chaoyang','Haidian','Beijing'], //Array of the 0th area. 0{0,1,2}
['Hangzhou','Haining'] //Array of the first area, 1{0.1}
];
function choose(){
var opt = "";
var len = area[province.value]; //If Beijing 0 is selected, then len=['Chaoyang', 'Haidian'] This is the <span style="background-color: #888888;">city</span> array connecting which province corresponds to which city
if(province.value == '-1'){ //Because when the value of select is -1, it is the word 'province', not Beijing, so when we choose this province, it means that the city is empty
city.innerHTML = opt;
}
for(var i = 0;i < len.length; i++){ //The number of arrays of area for(i = 0;i < 3; i++)
opt = opt + '<option value ="'+ i +'"> '+ len[i]+ '</option>' //opt = "" + <option value = "0">Chaoyang(lin[0])</option>,
//opt = <option value = "0">Chaoyang(lin[0])</option>, + <br>
<option value = "1">Haidian(lin[1])</option>
//opt = <option value = "0">Chaoyang(lin[0])</option>, + <br>
<option value = "1">Haidian(lin[1])</option> + <br>
<option value = "2">Beijing(lin[2])</option>
}
city.innerHTML = opt;
}
province.onchange = function(){
choose();
}
Second-level linkages can be seen everywhere in general web pages, usually with addresses, such as clicking on Zhejiang Province, followed by Hangzhou City and Jiaxing City; clicking on Beijing Province, Chaoyang and Haidian, instead of Hangzhou and Jiaxing.
To implement this step, you need to use javascript to implement it. The principle uses onchange time.
The above is the entire content of this article, I hope you like it.