javascript implements a simple two level linkage

2020-05-17 04:47:00
OfStack

Level 2 linkage can be seen everywhere in the web page like 1, where 1 is the address, such as click on zhejiang province, then appear hangzhou city, jiaxing city; Click on Beijing province to appear is chaoyang, haidian, rather than hangzhou, jiaxing.

To do this, you need to use javascript. The principle USES the time of onchange.

First, the onchange event occurs when the content of the domain changes. JavaScript objects that support this event: fileUpload, select, text, textarea, select is what we used to implement the level 2 linkage.

The following is the HTML code. First, we set 1 select as the province, and the second select as the city. However, we use an array in js to connect it with the province.



<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>javascript2 Levels of linkage </title>

</head>

<body>

<select id="province">

    <option value="-1"> province </option>

    <option value="0"> Beijing </option>

    <option value="1"> zhejiang </option>

</select>

<select id="city">

</select>

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

</body>

</html>

Here is the js code



var province = document.getElementById("province");

var city = document.getElementById("city");

var area = [

[' The rising sun ',' haidian ',' Beijing '], // The first 0 a area The array. 0{0,1,2}

[' hangzhou ',' haining ']         // The first 1 a area An array of , 1{0.1}

];

 function choose(){

     var opt = "";

     var len = area[province.value];  // If you choose Beijing 0 And then, len=[' Chaoyang ' ' Haidian ' ]     This is connecting which province corresponds to which city <span style="background-color: #888888;"> The city of </span> An array of 

     if(province.value == '-1'){     // because select the value for -1 'is' province' ' This word, not Beijing, so when we choose this province, we should make its city empty 

         city.innerHTML = opt;

     }

     for(var i = 0;i < len.length; i++){  //area The number of arrays for(i = 0;i < 3; i++)

        opt = opt + '<option value ="'+ i +'">  '+ len[i]+ '</option>'  //opt = "" + <option value = "0"> The rising sun (lin[0])</option>,

     //opt = <option value = "0"> The rising sun (lin[0])</option>, + <br>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

     <option value = "1"> haidian (lin[1])</option>

     //opt = <option value = "0"> The rising sun (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();

}

To do this, javascript is used. The principle USES the time of onchange.

That's all for this article, I hope you enjoy it.