Select (option)

Select (option)

1. Use of the drop-down box:

You can see the use of the drop-down box in many places. The most common option is to select the address when entering the address.

2. Demo:

3. Code Demonstration:

The drop-down box is mainly usedAndTag; a, the code of the first drop-down box, and the content of the second drop-down box depend on the selection of the first drop-down box

--- Select --- Hunan Hubei Province Zhejiang GuangdongB. The onchange = selectcity () trigger event is required to monitor the option in a drop-down box. The specific JavaScript code is as follows:

(This is mainly the second-level linkage.
1. Use The label "option" is written. Based on the written information, a two-dimensional array is written in the function, which corresponds to each other. (The data will be transmitted from the background in the future. for demonstration purposes, the data is written to an end)
2. the main trigger time function is the onchang () function. The selectedIndex in the select object is used to obtain the index and locate it from the two-dimensional array, and add it to the select.
3. Note that you need to remove it first and then add it. Otherwise, it will always exist. The select options object length is used, then, you can remove the first ----- or directly set the length to 1 ;)

 

<Script type = text/javascript> function selectcity () {var citys = [[Changsha, Yiyang, Changde, Zhuzhou, Zhangjiajie], [Yichang, Wuhan, Jingmen, factory], [Hangzhou, Ningbo, Wenzhou, Jiaxing], [Guangzhou, Dongguan, Shenzhen, Zhuhai]; var index1 = document. getElementById (sid ). selectedIndex; // obtain the option serial number selected by the user in the province combo box to obtain the option serial number, to facilitate matching the preceding two-dimensional array to add var option1 = document. getElementById (ssid); // to add to this node, You Need To cycle option1.options one by one. length = 1; // directly set the total length to 1, leave a "please select", and directly set the length to 1 ,, this saves a lot of trouble in removing elements. for (var x = 0; x
 
  
C. Remove the elements in the second drop-down box in the middle. In addition to setting the length to 1, you can also remove the elements one by one as follows:
  
 
  
Get all the content in the ssid, obj. options (); and then remove them one by one.
  
 
  
Var option1 = document. getElementById (ssid); // Add it to the node and one-to-one loop is required.
  
Var len = option1.options. length; // The length of all content in Level 2
  
For (var x = 0; x
   
    
4. Conclusion: These data will be obtained from the background in the future. Here we just want to demonstrate the use of the drop-down box.