Javascript(四)javascript实现级联菜单

要实现这个功能,我们需要做三个步骤:

  • 定义省和对应市的数据结构。
  • 利用省份下拉框的选项改变事件onChange。
  • 根据用户选择的省份,动态添加城市下拉框的值。

1、定义省和对应市的数据结构

这里采用数组的方式定义,为了方便展示功能,这里仅仅定义几个省和市。

//初始化所有的信息

var cityarr=new Array(3);

cityarr["广东省"]=["广州市","江门市","清远市"];

cityarr["广西省"]=["南宁市","桂林市","北海市"];

cityarr["山东省"]=["青岛市","济南市","烟台市"];

2、利用省份下拉框的选项改变事件onChange

定义一个selectcity()的函数,然后设计界面,绑定第一个省的select控件的onchange事件。

省:<select οnchange="selectcity()" id="first">

<option value="0">--请选择--</option>

<option value="广东省">广东</option>

<option value="广西省">广西</option>

<option value="山东省">山东</option>

</select>

<br /> 

市:

<select id="city">

<option>--请选择--</option>

</select>

3、根据用户选择的省份,动态添加城市下拉框的值

实现selectcity函数:

function selectcity(){

      //

      var first=document.getElementById("first");

      var city=document.getElementById("city");

      //先清空

      city.options.length=0;      

      if(first.value==0){

            var opt=new Option("--请选择--",0);

            city.add(opt);

      }else{

         //1、获得用户选择的值

     for(var i=0;i< cityarr[first.value].length;i++){

         var opt=new Option(cityarr[first.value][i],cityarr[first.value][i]);

         city.add(opt);

     }

      }

  }

效果如下:

 

全部评论

相关推荐

996的工作制还是没能硬啃下去,快要面试怂了,取消了
牛客80700350...:很正常,不是所有人都能接受这种强度的。不叫怯战,这叫明智
点赞 评论 收藏
分享
原来已经一年了,因为没有加任何实验室没有学长学姐带,再一次偶然的机会下刷到我们学校的牛肉哥,和他聊天之后发现他也没加实验室能进大厂,我就燃起了希望,去年大概&nbsp;4&nbsp;月份找好路线&nbsp;零基础&nbsp;开始学&nbsp;5&nbsp;月背八股和开始刷算法很难受&nbsp;7-8&nbsp;月焦虑躯体化害怕找不到实习&nbsp;9&nbsp;月找到一家像样的小厂去实习了&nbsp;4&nbsp;个月大三上期末考试结束之后&nbsp;1&nbsp;月份回来边实习边准备工作压力很大&nbsp;当时只有字节、百度、商汤的面试,字节三面挂了,百度&nbsp;oc,商汤&nbsp;二面挂(差评&nbsp;无效面试),之后来深圳百度实习之后还是觉得不甘心一直没把算法和八股扔下一直在准备,百度实习的时候&nbsp;mt&nbsp;交给我一个特别重要的工作数据库迁移(特别感谢&nbsp;mt&nbsp;,这个需求学到了很多东西处理了一堆线上问题),本来看着暑期他们面试都很困难,然后听说百度要涨实习薪资(然而&nbsp;5&nbsp;月并没有涨),就想着留在百度吧也懒得面试了,4&nbsp;月&nbsp;20&nbsp;多的时候字节&nbsp;hr&nbsp;打电话约面问我要不要尝试一下询问了&nbsp;1&nbsp;月份三面为啥会挂有没有学习&nbsp;ai&nbsp;知识(因为字节这边后端岗位偏&nbsp;ai),我来到百度之后全面拥抱&nbsp;AI&nbsp;也认识了我的好兄弟&nbsp;X&nbsp;哥,他在百度&nbsp;XX&nbsp;部门&nbsp;Agent&nbsp;实习,他属于是我&nbsp;Agent&nbsp;的启蒙老师,来百度之后一直在了解&nbsp;AI&nbsp;这一块,我就接受了字节的面试,一面的时候&nbsp;20&nbsp;分钟实习拷打然后突然说&nbsp;30&nbsp;分钟代码考核我心就凉了以为是&nbsp;kpi,算法题是手撕高并发安全下的令牌桶限流器,我写了整整&nbsp;80&nbsp;多行代码最后也写出来了,但是从来没看到过出这种题能&nbsp;oc&nbsp;的我也就不管了,后边面试也是很顺利但是流程有点长可能一直在横向吧总结结果是好的!!!感谢这一年努力的自己和遇到的各位互联网大佬分享的知识!!!ps&nbsp;图二纯感慨&nbsp;(觉得🍬请不要喷我)欢迎大家一起交流学习呀!!!!
点赞 评论 收藏
分享
评论
点赞
收藏
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务