JavaScript实现二级联动下拉框

开发 前端
JavaScript是一种客户端的脚本语言,这是众所周知的。它不仅可以使网页增加互动性,还可以使有规律地重复的HTML文段简化,减少下载时间。下面让我们一起来看用JavaScript实现二级联动下拉框。

Javascript是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。

这个是简单也是最基本的联动下拉框的示例,这个示例主要针对那些只有二级联动,且***级是固定的选项,第二级的内容也比较简单。这里使用了javascript来联动第二级下拉框 。

显示代码打印 

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">   
  2. <HTML>   
  3. <HEAD>   
  4. <TITLE> New Document </TITLE>   
  5. <META NAME="Generator" CONTENT="EditPlus">   
  6. <META NAME="Author" CONTENT="">   
  7. <META NAME="Keywords" CONTENT="">   
  8. <META NAME="Description" CONTENT="">   
  9. <script language="JavaScript" type="text/javascript">   
  10. //定义了城市的二维数组,里面的顺序跟省份的顺序是相同的。通过selectedIndex获得省份的下标值来得到相应的城市数组   
  11. var city=[   
  12. ["北京","天津","上海","重庆"],   
  13. ["南京","苏州","南通","常州"],   
  14. ["福州","福安","龙岩","南平"],   
  15. ["广州","潮阳","潮州","澄海"],   
  16. ["兰州","白银","定西","敦煌"]   
  17. ];    
  18. function getCity(){   
  19. //获得省份下拉框的对象   
  20. var sltProvince=document.form1.province;   
  21. //获得城市下拉框的对象   
  22. var sltCity=document.form1.city;   
  23. //得到对应省份的城市数组   
  24. var provinceCity=city[sltProvince.selectedIndex - 1];   
  25. //清空城市下拉框,仅留提示选项   
  26. sltCity.length=1;   
  27. //将城市数组中的值填充到城市下拉框中   
  28. for(var i=0;i<provinceCity.length;i++){   
  29. sltCity[i+1]=new Option(provinceCity[i],provinceCity[i]);   
  30. }   
  31. }   
  32. </script>   
  33. </HEAD>   
  34. <BODY>   
  35. <FORM METHOD=POST ACTION="" name="form1">   
  36. <SELECT NAME="province" onChange="getCity()">   
  37. <OPTION VALUE="0">请选择所在省份 </OPTION>   
  38. <OPTION VALUE="直辖市">直辖市 </OPTION>   
  39. <OPTION VALUE="江苏省">江苏省 </OPTION>   
  40. <OPTION VALUE="福建省">福建省 </OPTION>   
  41. <OPTION VALUE="广东省">广东省 </OPTION>   
  42. <OPTION VALUE="甘肃省">甘肃省 </OPTION>   
  43. </SELECT>   
  44. <SELECT NAME="city">   
  45. <OPTION VALUE="0">请选择所在城市 </OPTION>   
  46. </SELECT>   
  47. </FORM>   
  48. </BODY>   
  49. </HTML>  

这段代码比较简单。

如果对js不大熟悉,可以看看下面关于js处理select对象的内容:

1、使用selectedIndex属性获取当前选项的索引
下拉框的选项是一个线性数组,每个选项都有一个索引,selectedIndex表示当前被选中的选项的索引号。结合options属性,可以得到被选中的option对象,从而对其做进一步的处理。当下拉框可多选时,selectedIndex属性返回***个被选中的索引。 

selectedIndex是个只读的属性,想把通过索引指定的下拉框的项设置为选中状态,可以设置option对象的selected=true来实现。

2、为select对象添加一个选项

显示代码打印 

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

表示创建一个值为provinceCity[i],文本为provinceCity[i]的option对象,sltCity是页面上的city对象,i+1指定新添选项的位置。

3、清空一个select对象

要将下拉框的所有选项删除有两种方法,***种方法就是遍历删除:

显示代码打印

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

第二种方法比较简单,因此一般都使用此方法:

显示代码打印

  1. myselect.length=0;  

通过本文的介绍,希望能给你带来帮助。关于其他下拉框联动的问题,将在后续章节中继续介绍,敬请关注。

【编辑推荐】

  1. JavaScript变量作用域之我见
  2. 高性能WEB开发之如何加载JavaScript
  3. 泄露你的JavaScript技术很烂的五个表现
  4. 从零开始学习jQuery之你必须知道的JavaScript

 

责任编辑:于铁 来源: firnow.com
相关推荐

2009-07-02 14:18:13

JSP JavaScr下拉菜单

2009-12-09 16:42:55

PHP二级联动菜单

2009-08-03 16:06:28

ASP.NET下拉框

2010-10-08 12:06:40

联动菜单JavaScript

2020-07-20 14:04:34

Excel下拉菜单数据

2015-07-17 07:39:44

搜索下拉框产

2009-09-21 17:17:11

Hibernate二级

2010-10-18 13:16:24

GalleryAndroid

2009-01-08 21:33:34

2009计算机等级考试二级

2009-06-18 15:24:35

Hibernate二级

2011-08-11 09:50:56

路由器设置

2021-03-30 09:01:07

Python模拟软件Python基础

2009-12-10 13:14:26

PHP下拉框

2009-09-21 14:59:31

Hibernate二级

2009-09-24 11:04:56

Hibernate二级

2013-09-08 23:30:56

EF Code Fir架构设计MVC架构设计

2024-01-31 11:51:50

PyQt6单选框Python

2010-08-19 15:40:34

DIVIE6

2009-09-21 14:39:40

Hibernate二级

2018-09-04 09:00:20

点赞
收藏

51CTO技术栈公众号