javascript实现下拉条联动_js实现select二级联动下拉菜单

本文实例为大家分享了js实现select二级联动下拉菜单，供大家参考，具体内容如下

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

New Document

//定义了城市的二维数组，里面的顺序跟省份的顺序是相同的。通过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

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

}

请选择所在省份

直辖市

江苏省

福建省

广东省

甘肃省

请选择所在城市

这段代码比较简单。

如果对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

myselect.options[i]=null;

}

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

myselect.length=0;

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

javascript实现下拉条联动_js实现select二级联动下拉菜单相关推荐

iview的select联动_iview2 之select二级联动细谈
还是二级联动问题,之前的方法是可以实现二级联动的.但是理想很丰满,现在很骨感.因为后台可能也没法给你理想的数据结构.最后想到办法的利用两个接口拿到数据,实现渲染.直接来代码 {{ item.first ...
vue.js 默认选中select_vue select二级联动第二级默认选中第一个option值的实例
当二级联动比如选择国家的时候,希望选中一个国家的时候后面城市默认选中第一个城市,则给国家的select加一个@change事件就可以了所在区域 {{item.country}} {{item}} d ...
php 下拉菜单多选get,Jquery实现select二级联动多选下拉菜单
前言平时虽然也有写前端,但是对于一些复杂的功能实现仍是一知半解.这次项目需要实现一个多选下拉菜单,并且该菜单要和上级下拉菜单保持联动.更加麻烦的是,我需要完成以下操作,以省.市二级联动菜单为例: 选 ...
js 下拉层级多选_Jquery实现select二级联动多选下拉菜单
前言平时虽然也有写前端,但是对于一些复杂的功能实现仍是一知半解.这次项目需要实现一个多选下拉菜单,并且该菜单要和上级下拉菜单保持联动.更加麻烦的是,我需要完成以下操作,以省.市二级联动菜单为例: 选 ...
element 下拉框联动_element-ui select 二级联动
在使用select 选择框时,2个select 怎么关联在一起(第一个值发生变化,第二个select值随第一个变化而不同) 两个输入框代码 v-for="item in select1&qu ...
php下拉列表二级联动,PHP+Ajax实现二级联动下拉菜单！
正文字体大小: 中 PHP+Ajax实现二级联动下拉菜单! (2009-12-05 01:11:39) 标签: 杂谈数据库 .................................... ...
select二级联动价格策略+js的eval()
eval()函数,曾经自己并不觉得怎么样,但是项目中遇到一个需求,被迫使用,感觉确实很强大,记下来,忘了了看看! 需求: 1) 省内价格可用精确到地市(即,区号),省外价格只精确到省. ...
JavaScript之实例练习（正反选、二级联动）
文章目录正反选案例二级联动案例正反选案例 1.使用的原理全选操作,就是遍历整个表格中的每一项,将checked设置为True 取消则是将checked全变为false就行反选则是非原来的状态 ...
js select二级联动
 <select id="s1" onChange="move()" name="deducted_divis ...

javascript实现下拉条联动_js实现select二级联动下拉菜单

javascript实现下拉条联动_js实现select二级联动下拉菜单相关推荐

最新文章

热门文章