Home > Developer > JavaScript

JavaScript implementation level-2 linkage drop-down box

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

JavascriptIt is a kind of object-oriented dynamic client scripting language that is prototyped and inherited from Netscape LiveScript. It mainly aims to solve server-side languages, such as Perl, the speed issues left over to provide customers with smoother browsing results.

This is simple and basic.Linkage drop-down boxThis example is mainly for those with only two levels of association, and the first level is a fixed option, the second level content is relatively simple. Javascript is used to link the second-level drop-down box.

Display code printing

 
 
    
  
  
  1. <! Doctype html public "-// W3C // dtd html 4.0 Transitional // EN">
    2. 
  
  
  2. <HTML>
    3. 
  
  
  3. <HEAD>
    4. 
  
  
  4. <TITLE> New Document </TITLE>
    5. 
  
  
  5. <Meta name = "Generator" CONTENT = "EditPlus">
    6. 
  
  
  6. <Meta name = "Author" CONTENT = "">
    7. 
  
  
  7. <Meta name = "Keywords" CONTENT = "">
    8. 
  
  
  8. <Meta name = "Description" CONTENT = "">
    9. 
  
  
  9. <Script language = "JavaScript" type = "text/javascript">
    10. 
  
  
  10. // Defines the two-dimensional array of the city, in which the order is the same as that of the province. Obtain the province base value through selectedIndex to obtain the corresponding city array.
    11. 
  
  
  11. Var city = [
    12. 
  
  
  12. ["Beijing", "Tianjin", "Shanghai", "Chongqing"],
    13. 
  
  
  13. ["Nanjing", "Suzhou", "Nantong", "Changzhou"],
    14. 
  
  
  14. ["Fuzhou", "Fuan", "Longyan", "Nanping"],
    15. 
  
  
  15. ["Guangzhou", "Chaoyang", "Chaozhou", "Chenghai"],
    16. 
  
  
  16. ["Lanzhou", "Baiyin", "Dingxi", "Dunhuang"]
    17. 
  
  
  17. ];
    18. 
  
  
  18. Function getCity (){
    19. 
  
  
  19. // Obtain the province drop-down list object
    20. 
  
  
  20. Var sltProvince = document. form1.province;
    21. 
  
  
  21. // Obtain the objects in the city drop-down list
    22. 
  
  
  22. Var sltCity = document. form1.city;
    23. 
  
  
  23. // Obtain the city array of the corresponding province
    24. 
  
  
  24. Var provinceCity = city [sltProvince. selectedIndex-1];
    25. 
  
  
  25. // Clear the city drop-down list. Only the prompt option is left.
    26. 
  
  
  26. SltCity. length = 1;
    27. 
  
  
  27. // Fill the value in the city array in the city drop-down list
    28. 
  
  
  28. For (var I = 0; I <provinceCity. length; I ++ ){
    29. 
  
  
  29. SltCity [I + 1] = new Option (provinceCity [I], provinceCity [I]);
    30. 
  
  
  30. }
    31. 
  
  
  31. }
    32. 
  
  
  32. </Script>
    33. 
  
  
  33. </HEAD>
    34. 
  
  
  34. <BODY>
    35. 
  
  
  35. <Form method = post action = "" name = "form1">
    36. 
  
  
  36. <Select name = "province" onChange = "getCity ()">
    37. 
  
  
  37. <Option value = "0"> select the province </OPTION>
    38. 
  
  
  38. <Option value = "municipality"> municipality </OPTION>
    39. 
  
  
  39. <Option value = "Jiangsu Province"> Jiangsu Province </OPTION>
    40. 
  
  
  40. <Option value = "Fujian Province"> Fujian Province </OPTION>
    41. 
  
  
  41. <Option value = "Guangdong Province"> Guangdong Province </OPTION>
    42. 
  
  
  42. <Option value = "Gansu Province"> Gansu Province </OPTION>
    43. 
  
  
  43. </SELECT>
    44. 
  
  
  44. <Select name = "city">
    45. 
  
  
  45. <Option value = "0"> select the city </OPTION>
    46. 
  
  
  46. </SELECT>
    47. 
  
  
  47. </FORM>
    48. 
  
  
  48. </BODY>
    49. 
  
  
  49. </HTML>
    50.

This code is relatively simple.

If you are not familiar with js, you can look at the following content about how js processes select objects:

1. Use the selectedIndex attribute to obtain the index of the current option
The option in the drop-down box is a linear array. Each option has an index. selectedIndex indicates the index number of the selected option. Combined with the options attribute, you can obtain the selected option object for further processing. When multiple options are available in the drop-down box, the selectedIndex attribute returns the first selected index.

SelectedIndex is a read-only attribute. To set the items in the drop-down box specified by the index to the selected state, you can set the option object's selected to true.

2. Add an option for the select object

Display code printing

 
 
    
  
  
  1. sltCity[i+1]=new Option(provinceCity[i],provinceCity[i]);   
    2. 
  
  
  2. new Option(provinceCity[i],provinceCity[i])  
    3.

Creates an option object whose value is provinceCity [I] and whose text is provinceCity [I]. sltCity is the city object on the page, and I + 1 specifies the location of the new option.

3. Clear a select object

There are two ways to delete all the options in the drop-down box. The first method is to traverse and delete:

Display code printing

 
 
    
  
  
  1. var l=myselect.length;   
    2. 
  
  
  2. for(var i=0;i<l;i++){   
    3. 
  
  
  3. myselect.options[i]=null;   
    4. 
  
  
  4. }   
    5. 
  
  
  5.  
    6.

The second method is relatively simple, so this method is generally used:

Display code printing

 
 
    
  
  
  1. myselect.length=0;  
    2.

I hope this article will help you. We will continue to discuss other issues related to drop-down box interaction in subsequent chapters.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
oauth 2 0 implementation javascript input box value wedding drop box oauth 2 0 implementation php javascript message box in php javascript alert box in php bitdefender box 2 review

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More