JavaScript实现二级联动下拉框
创始人
2024-07-26 07:41:51
0

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

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

显示代码打印 

  1.    
  2.    
  3.    
  4.  New Document    
  5.    
  6.    
  7.    
  8.    
  9.    
  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
  29. sltCity[i+1]=new Option(provinceCity[i],provinceCity[i]);   
  30. }   
  31. }   
  32.    
  33.    
  34.    
  35.    
  36.    
  37. 请选择所在省份    
  38. 直辖市    
  39. 江苏省    
  40. 福建省    
  41. 广东省    
  42. 甘肃省    
  43.    
  44.    
  45. 请选择所在城市    
  46.    
  47.    
  48.    
  49.   

这段代码比较简单。

如果对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
  3. myselect.options[i]=null;   
  4. }   
  5.  

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

显示代码打印

  1. myselect.length=0;  

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

【编辑推荐】

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

 

相关内容

热门资讯

如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下,MySQL服务器仅侦听来自localhos...
如何利用交换机和端口设置来管理... 在网络管理中,总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
施耐德电气数据中心整体解决方案... 近日,全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”,作为该活动的...
20个非常棒的扁平设计免费资源 Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...
德国电信门户网站可实时显示全球... 德国电信周三推出一个门户网站,直观地实时提供其安装在全球各地的传感器网络检测到的网络攻击状况。该网站...
为啥国人偏爱 Mybatis,... 关于 SQL 和 ORM 的争论,永远都不会终止,我也一直在思考这个问题。昨天又跟群里的小伙伴进行...
《非诚勿扰》红人闫凤娇被曝厕所... 【51CTO.com 综合消息360安全专家提醒说,“闫凤娇”、“非诚勿扰”已经被黑客盯上成为了“木...
2012年第四季度互联网状况报... [[71653]]  北京时间4月25日消息,据国外媒体报道,全球知名的云平台公司Akamai Te...