java js 二级联动下拉列表_最简单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;

本条技术文章来源于互联网，如果无意侵犯您的权益请点击此处反馈版权投诉

本文系统来源：php中文网

java js 二级联动下拉列表_最简单js代码实现select二级联动下拉菜单相关推荐

html下拉列表插件,js+CSS实现模拟华丽的select控件下拉菜单效果
本文实例讲述了js+CSS实现模拟select控件的下拉菜单效果.分享给大家供大家参考.具体如下: 这是一个JS+CSS技术实现的Select控件效果,模拟出来的,比默认的Select更漂亮,有了这个 ...
flask html下拉列表,如何使用Flask和HTML从python列表创建下拉菜单
我正在尝试使用来自python脚本的信息在HTML中创建一个下拉菜单.不过,到目前为止我已经让它工作了,html下拉列表将列表中的所有4个值显示为4个选项. 当前:选项1:红色.蓝色.黑色.橙色:选项 ...
jq中查找上级_必备实用技能：在EXCEL中制作下拉菜单
发出去表格统计信息,收回来时却发现填得乱糟糟?小白通教你制作下拉菜单,填表人只能规规矩矩从你给的选项中填.认真学习,这个是必备技能哦. 单级下拉菜单 1. 选择需要编辑的单元格,选择"数据- ...
用JS实现的完美无限级联下拉菜单
我曾经用JS实现过自认为挺完美的纯客户端无限及联下拉菜单,今天翻出来是想借个话题交些ASP.NET的朋友,希望有朋友可以给我辛酸的ASP.NET之路一点帮助. 该菜单看上去挺完美的地方 1)通用:支持 ...
dropdownlist三级联动怎么实现_简单三步，轻松搞定一级、二级、三级下拉菜单
工作中,为了录入数据方便,数据规范,我们经常采用下拉菜单来制作规范模板,今天,技巧君和大家分享一下一级.二级和三级联动下拉菜单制作方法,文末有示例文件下载方法哦! 下拉菜单示例一级下拉菜单一级下拉 ...
js 下拉层级多选_Jquery实现select二级联动多选下拉菜单
前言平时虽然也有写前端,但是对于一些复杂的功能实现仍是一知半解.这次项目需要实现一个多选下拉菜单,并且该菜单要和上级下拉菜单保持联动.更加麻烦的是,我需要完成以下操作,以省.市二级联动菜单为例: 选 ...
php下拉列表二级联动,PHP+Ajax实现二级联动下拉菜单！
正文字体大小: 中 PHP+Ajax实现二级联动下拉菜单! (2009-12-05 01:11:39) 标签: 杂谈数据库 .................................... ...
popwindow下拉筛选二级联动_职场人必备！一分钟搞定Excel二级联动下拉菜单
对于一级下拉菜单的设置,相信经常使用Excel的用户都不陌生,那么,二级联动下拉菜单又是什么呢?与一级下拉菜单有什么关系呢? 二级联动下拉菜单是根据一级下拉菜单内容的变化而变化的.大家都知道,不同的部 ...
三星二级菜单_你变我也变，神奇的excel二级联动下拉菜单
如下图所示,在手机列输入或选取苹果,型号下拉里会显示所有苹果手机的所有型号,如果手机列输入三星,在型号列下拉菜单显示所有三星的型号. 手机列选苹果: 手机列选取三星同学们应该明白什么是二级下拉联动菜 ...
下拉默认选择_在Excel中制作二级联动下拉菜单，太有用了
对于一级下拉菜单的设置,相信经常使用Excel的用户都不陌生,那么,二级联动下拉菜单又是什么呢?与一级下拉菜单有什么关系呢? 二级联动下拉菜单是根据一级下拉菜单内容的变化而变化的.大家都知道,不同的部 ...

java js 二级联动下拉列表_最简单js代码实现select二级联动下拉菜单

java js 二级联动下拉列表_最简单js代码实现select二级联动下拉菜单相关推荐

最新文章

热门文章