当前位置: 首页 » 综合知识 » it知识 » 正文

如何用JavaScript实现一个二级联动下拉框

发布时间:2023-08-02 以下文章来源于网友投稿,内容仅供参考!

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

显示代码打印

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">   <HTML>   <HEAD>   <TITLE> New Document </TITLE>   <META NAME="Generator" CONTENT="EditPlus">   <META NAME="Author" CONTENT="">   <META NAME="Keywords" CONTENT="">   <META NAME="Description" CONTENT="">   <script language="JavaScript" type="text/javascript">   //定义了城市的二维数组,里面的顺序跟省份的顺序是相同的。通过selectedIndex获得省份的下标值来得到相应的城市数组   var city=[   ["北京","天津","上海","重庆"],   ["南京","苏州","南通","常州"],   ["福州","福安","龙岩","南平"],   ["广州","潮阳","潮州","澄海"],   ["兰州","白银","定西","敦煌"]   ];    function getCity(){   //获得省份下拉框的对象   var sltProvince=document.form1.province;   //获得城市下拉框的对象   var sltCity=document.form1.city;   //得到对应省份的城市数组   var provinceCity=city[sltProvince.selectedIndex - 1];   //清空城市下拉框,仅留提示选项   sltCity.length=1;   //将城市数组中的值填充到城市下拉框中   for(var i=0;i<provinceCity.length;i++){   sltCity[i+1]=new Option(provinceCity[i],provinceCity[i]);   }   }   </script>   </HEAD>   <BODY>   <FORM METHOD=POST ACTION="" name="form1">   <SELECT NAME="province" onChange="getCity()">   <OPTION VALUE="0">请选择所在省份 </OPTION>   <OPTION VALUE="直辖市">直辖市 </OPTION>   <OPTION VALUE="江苏省">江苏省 </OPTION>   <OPTION VALUE="福建省">福建省 </OPTION>   <OPTION VALUE="广东省">广东省 </OPTION>   <OPTION VALUE="甘肃省">甘肃省 </OPTION>   </SELECT>   <SELECT NAME="city">   <OPTION VALUE="0">请选择所在城市 </OPTION>   </SELECT>   </FORM>   </BODY>   </HTML>

这段代码比较简单。

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

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

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

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

显示代码打印

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

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

3、清空一个select对象

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

显示代码打印

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

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

显示代码打印

myselect.length=0;
  • • Linux Ecdsa密钥长度选择有何依据

    在Linux

  • • Linux Khook在内核监控中的应用如何

    Linux

  • • Linux Gsoap是否支持异步通信

    GSOAP是

  • • Linux Coremail如何提升用户体验

    提升Linu

  • • Linux Ecdsa算法有哪些局限性

    ECDSA

  • 哎呀音乐钢琴键盘学习《 钢琴主人训练营》 西瓜学琴
    郭蝈 陪练钢琴 30节课时 考级刚需 让孩子每一次练琴都是高质量的
    30天轻松学会五线谱 流行钢琴自学初级教程 牙牙学琴
    流行爵士钢琴实战技巧VIP课 - 继伟 哎呀音乐
    【海上钢琴师】原版 MT1990钢琴谱
    百首经典流行钢琴实战曲集 - 继伟
    雷费尔德电钢琴重锤88键专业考级儿童初学者数码电子钢琴家用
    小练咖 真人钢琴陪练 1v1服务 2999随时退 1课时50分钟 考级刚需
    雅马哈电钢琴88键重锤CLP735智能数码电子钢琴家用专业初学者考级
    【原装进口】Yamaha/雅马哈钢琴 b121 SC2原声静音钢琴
  • 珠海专业调钢琴
  • 天津宝坻区调钢琴
  • 天津静海区钢琴调音
  • 成都简阳市钢琴调律
  • 大连瓦房店市钢琴调音
  • 眉山调钢琴联系方式
  • 惠州大亚湾钢琴调琴师
  • 长治调琴师
  • 厦门湖里区钢琴调音师
  • 上海普陀区钢琴调音师