js实现select二级联动下拉菜单
作者:lijiao 发布时间:2024-04-17 09:49:51
标签:js,select,二级联动,下拉菜单
本文实例为大家分享了js实现select二级联动下拉菜单,供大家参考,具体内容如下
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 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;
0
投稿
猜你喜欢
- 引言之前有段时间用postgresql 数据库,在上云之后,从自增主键变为uuid,感觉uuid全球唯一,很方便。最近用mysql,发现my
- 一、协程介绍协程:英文名Coroutine,是单线程下的并发,又称微线程,纤程。协程是一种用户态的轻量级线程,即协程是由用户程序自己控制调度
- 目前可实现:MD5算法、SHA256算法、先MD5后SHA256、先SHA256后MD5、两次MD5、两次SHA256、前8位MD5算法后8
- 在数据库查询的时候,我们有时有这样的需求,就是要找出数据表里指定范围行内的数据记录,比如说要找出数据表里第10行到第20行的这10条数据,那
- 这是一个很久以前的例子,现在在整理资料时无意发现,就拿出来再改写分享。1.需求 1.1 基本需求: 根据输入的地址关键字,搜索出完
- CSS Sprites技术早在2005年 CSS Zengarden 的园主 Dave Shea就在ALA发表对该技术的详细阐述。原先只在C
- PHP使用缓存即时输出内容(output buffering)的方法。分享给大家供大家参考。具体如下:$buffer = ini_get(&
- ########################## # # # 为了避免截断中文字符 # # 文件要求是 unicode 编码 # # t
- 前言MySQL的binlog日志是MySQL日志中非常重要的一种日志,记录了数据库所有的DML操作。通过binlog日志我们可以进行数据库的
- 1、复杂SQL查询1.1、单表查询(1)选择指定的列[例]查询全体学生的学号和姓名select Sno as 学号,Sname as 姓名
- 总的感觉,python本身并没有对二进制进行支持,不过提供了一个模块来弥补,就是struct模块。python没有二进制类型,但可以存储二进
- 众所周知,数据库中INSERT INTO语法是append方式的插入,而最近在处理一些客户数据导入场景时,经常遇到需要覆盖式导入的情况常见的
- 用PHP的json_encode来处理中文的时候, 中文都会被编码, 变成不可读的, 类似”\u***”的格式,如果想汉字不进行转码,这里提
- 做一个总结,把自己这些年的从业经历和观感罗列一下,某些话可能触及到个人神经,但它们没有恶意。设计师喜欢把世界想象得很美好,社会很和谐,但是这
- 函数原型:getopt.getopt(args, shortopts, longopts=[])参数解释:  
- 比如一个汉字也只会算一个字节,在排版时如果全是汉字,好说,反正没什么差别,但是如果 * 作的字符串有汉字又有英文字母时,就不方便了,以下三个函
- 线上有个需求,格式化,从一堆s1,s100-s199中找出连续的服并且格式化显示出来,如:神魔:S106-109,s123,s125御剑:
- 系列目录:1. 服务器XMLHTTP(Server XMLHTTP in ASP)基础2. 
- 目前由于phantomjs已经不维护了,而新版的Chrome(59+)推出了Headless模式,对爬虫来说尤其是定时任务的爬虫截屏之类的是
- 最近出的每日一题里面,有一道是关于合并同类型数据为一行的题,使用SQL Server 2017版本及以上的直接使用STRING_AGG()函