js实现select二级联动下拉菜单


Posted in Javascript onApril 17, 2020

本文实例为大家分享了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;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
谷歌浏览器 insertCell与appendChild的区别
Feb 12 Javascript
Javascript面向对象之四 继承
Feb 08 Javascript
JavaScript自执行闭包的小例子
Jun 29 Javascript
为什么Node.js会这么火呢?Node.js流行的原因
Dec 01 Javascript
node.js中的url.resolve方法使用说明
Dec 10 Javascript
jq checkbox 的全选并ajax传参的实例
Apr 01 Javascript
vue filters的使用详解
Jun 11 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
Mar 29 Javascript
深入解析koa之中间件流程控制
Jun 17 Javascript
微信小程序可滑动周日历组件使用详解
Oct 21 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
Dec 30 Javascript
微信小程序canvas动态时钟
Oct 22 Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
Apr 17 #Javascript
第二次聊一聊JS require.js模块化工具的基础知识
Apr 17 #Javascript
第一次接触JS require.js模块化工具
Apr 17 #Javascript
jqGrid 学习笔记整理——进阶篇(一 )
Apr 17 #Javascript
JS组件Bootstrap dropdown组件扩展hover事件
Apr 17 #Javascript
理解javascript对象继承
Apr 17 #Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
Apr 17 #Javascript
You might like
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
js自定义事件代码说明
2011/01/31 Javascript
jQuery ReferenceError: $ is not defined 错误的处理办法
2013/05/10 Javascript
canvas实现动态小球重叠效果
2017/02/06 Javascript
node使用UEditor富文本编辑器的方法实例
2017/07/11 Javascript
iscroll实现下拉刷新功能
2017/07/18 Javascript
详解小程序原生使用ES7 async/await语法
2018/08/06 Javascript
JS实现的A*寻路算法详解
2018/12/14 Javascript
ES6 Object.assign()的用法及其使用
2020/01/18 Javascript
js判断密码强度的方法
2020/03/18 Javascript
vue动画—通过钩子函数实现半场动画操作
2020/08/09 Javascript
JavaScript的一些小技巧分享
2021/01/06 Javascript
python创建一个最简单http webserver服务器的方法
2015/05/08 Python
Python Requests安装与简单运用
2016/04/07 Python
微信跳一跳自动运行python脚本
2018/01/08 Python
pycharm设置注释颜色的方法
2018/05/23 Python
win10子系统python开发环境准备及kenlm和nltk的使用教程
2019/10/14 Python
德国百年厨具品牌WMF美国站:WMF美国
2016/09/12 全球购物
SheIn沙特阿拉伯:女装在线
2020/03/23 全球购物
旅游管理实习自我鉴定
2013/09/29 职场文书
函授本科毕业自我鉴定
2013/10/09 职场文书
公司营业员的自我评价
2014/03/04 职场文书
前台文员职责范本
2014/03/07 职场文书
应届生求职信范文
2014/05/26 职场文书
消防安全宣传标语
2014/06/07 职场文书
森林防火宣传标语
2014/06/27 职场文书
承诺书样本
2014/08/30 职场文书
涉外离婚协议书怎么写
2014/11/20 职场文书
语文复习计划
2015/01/19 职场文书
在职证明书模板
2015/06/15 职场文书
民主生活会主持词
2015/07/01 职场文书
2015暑假假期总结
2015/07/13 职场文书
穷人该怎么创业?谨记以下几点
2019/07/11 职场文书
nginx的zabbix 5.0安装部署的方法步骤
2021/07/16 Servers
MongoDB日志切割的三种方式总结
2021/09/15 MongoDB
抖音动画片,皮皮虾,《治愈系》动画在用这首REMIX作为背景音乐,Anak ,The last world with you完整版
2022/03/16 杂记