JavaScript implements simple secondary linkage

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 it in implementing 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.

Copy the codeThe code is as follows:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">
<title>javascript secondary linkage</title>

</head>

<body>

<select >
<option value="-1">Sales</option>
<option value="0">Beijing</option>
<option value="1">Zhejiang</option>

</select>

<select >

</select>

<script src="../js/"></script>

</body>

</html>

The following is the js code

Copy the codeThe code is as follows:

var province = ("province");

var city = ("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[];  //If Beijing 0 is selected, then len=['Chaoyang', 'Haidian']    This is the <span style="background-color: #888888;">city</span> array of cities connected to which province corresponds to which city
if( == '-1'){     //Because the word "subject" when the value of select is -1, not Beijing, so when we choose this province, it means that the city is empty

          = opt;

     }
for(var i = 0;i < ; 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>

     }

      = opt;

}

 = function(){

    choose();

}

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.