js的二级联动

就是两个下拉列表框，就拿你在网上注册的时候要填个人地址，我假设它有两个下拉列表(其实还可以有更多)，第一个下拉列表中让你选择的省,而另一个下拉列表让你，选择的是城市,当你在省的下拉列表中的选择发生改变的时候，城市的下拉列表也应当跟着你所选择的省名称而发生改变，这样就产生了一种联动的较果也就是简单的二级联动。

操作方法

  • 01

    <!--html--> <select name="nation" id="nation"  > <option >----请选择您的国家-----</option> <option >中国</option> <option >美国</option> <option >韩国</option> </select> <select name="city" id="city"  > <option >----请选择您所在的城市-----</option> </select>

  • 02

    //js部分 var nation=document.getElementById('nation'); var city=document.getElementById('city'); var aoption=nation.getElementsByTagName('option'); var boption=city.getElementsByTagName('option'); var arr = [["北京","上海","深圳","广州","珠海"],["纽约","华盛顿","洛杉矶","芝加哥"],["首尔","釜山","仁川"]]; var s=0; nation.onchange=function(){ if(nation.selectedIndex==0){ fb();fa('----请选择您所在的城市-----'); } if(nation.selectedIndex==1){ fb(); for(var i=0;i<arr[0].length;i++){ s=arr[0][i]; fa(s); } } if(nation.selectedIndex==2){ fb(); for(var i=0;i<arr[1].length;i++){ s=arr[1][i]; fa(s); } } if(nation.selectedIndex==3){ fb(); for(var i=0;i<arr[2].length;i++){ s=arr[2][i]; fa(s); } } } function fa(s){ var op=document.createElement('option'); var optext=document.createTextNode(s) op.appendChild(optext); city.appendChild(op); // } function fb(){ for(var k=0;k<city.length;){ city.removeChild(boption[0]);} }

赞 (0)

相关推荐

  • 纯js做的select二级联动

    select 联动用到的范围很广,下面介绍一下简单的二级联动 操作方法 01 做一个简单的html页面,用于显示select联动,如图所示: 02 设置js,点击一级选择项时,创建其下对应的二级选择项 ...

  • Excel怎么设置二级联动下拉菜单?

    Excel怎么设置二级联动下拉菜单?在excel里制作下拉菜单有好几种方法,我主要介绍下用数据有效性设置下拉菜单及怎么设置二级联动下拉菜单.这两种方法我将均以例子说明. 一.用数据有效性设置下拉菜单 ...

  • Excel制作二级联动数据有效性方法图解

    我们在网上填写地址的时候,一般都会遇到这种情况,选择了省份之后,后面的市区选项下拉菜单中就会自动根据选择的省份,生成这个省份的所有市区,供我们选择.那么Excel中能不能实现这种效果呢? 无所不能的E ...

  • excel怎么制作二级联动的下拉菜单?

    在工作中,我们在应用excel的时候,有时需要用户从特定数据中选择,而不是自己填写,这一方面有利于数据的准确性,一方面大大提高了我们的工作效率.比如在选择省份的时候,提供一个下拉菜单,里面各个省份名称 ...

  • wps二级联动下拉列表怎么实现（wps制作二级下拉菜单）

    wps二级联动下拉列表怎么实现（wps制作二级下拉菜单）

    实例.将下面的一级类目和二级类目做成一个二级联动的下拉菜单.首先我们先选中左边的数据,然后在WPS上方找到[公式],再找到[指定],在弹出的输入框中我们勾选[首行],点击确定.然后在WPS上方[数据] ...

  • Excel中如何制作二级联动数据有效性

    我们在网上填写地址的时候,一般都会遇到这种情况,选择了省份之后,后面的市区选项下拉菜单中就会自动根据选择的省份,生成这个省份的所有市区,供我们选择.那么Excel中能不能实现这种效果呢? 无所不能的E ...

  • Excel制作下拉菜单及二级联动、多级联动菜单

    使用下拉菜单的方式选取内容,可以为我们的工作带来许多便利. 那么问题来了: 下拉菜单怎么做? 是否可以制作二级联动.多级联动的菜单?(即:选择A选项后,可以在关联的单元格选取A1.A2.A3等子选项) ...

  • Excel下拉菜单的设置(一级联动、二级联动）

    一.下拉菜单两个好处,一是方便输入,二是可以限定输入的内容,以防输入非法容. 二.设置方法:一用数据有效性设置,二定义数据源设置 操作方法 01 如下图所示,要求在销售员一列设置可以选取的下拉菜单. ...

  • excel二级联动下拉菜单怎么做

    本例向大家介绍如何在Excel中制作联动的二级下拉菜单. 操作步骤: 01 首先看一下原始数据,原始信息在一张工作表,第一行是省市名称,下面的若干行为对应省市下面的地名和区名.需要在另外一张工作表中A ...