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 相关文章推荐
JavaScript XML和string相互转化实现代码
Jul 04 Javascript
关于div自适应高度/左右高度自适应一致的js代码
Mar 22 Javascript
利用进制转换压缩数字函数分享
Jan 02 Javascript
node.js中的fs.closeSync方法使用说明
Dec 17 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
Sep 17 Javascript
微信小程序商品详情页规格属性选择示例代码
Oct 30 Javascript
vue中v-model的应用及使用详解
Jun 27 Javascript
详解基于iview-ui的导航栏路径(面包屑)配置
Feb 22 Javascript
js 计算图片内点个数的示例代码
Apr 04 Javascript
vue实现百度搜索功能
Dec 28 Javascript
webpack打包html里面img后src为“[object Module]”问题
Dec 22 Javascript
如何基于javascript实现贪吃蛇游戏
Feb 09 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
Re:从零开始的异世界生活 第2季 开播啦
2020/07/24 日漫
PHP+JS无限级可伸缩菜单详解(简单易懂)
2007/01/02 PHP
深入解析PHP中的(伪)多线程与多进程
2013/07/01 PHP
Laravel基础_关于view共享数据的示例讲解
2019/10/14 PHP
Javascript 解疑
2009/11/11 Javascript
跟着JQuery API学Jquery 之二 属性
2010/04/09 Javascript
JS获取地址栏参数的小例子
2013/08/23 Javascript
toggle()隐藏问题的解决方法
2014/02/17 Javascript
Visual Studio中js调试的方法图解
2014/06/30 Javascript
js实现拖拽效果
2015/02/12 Javascript
jQuery实现图片向左向右切换效果的简单实例
2016/05/18 Javascript
VUEJS实战之构建基础并渲染出列表(1)
2016/06/13 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
2016/11/11 Javascript
js判断iframe中元素是否存在的实现代码
2016/12/24 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
2018/05/31 Javascript
vuex提交state&amp;&amp;实时监听state数据的改变方法
2018/09/16 Javascript
如何基于js判断浏览器版本
2020/02/20 Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
2020/04/22 Javascript
JS获取当前时间戳方法解析
2020/08/29 Javascript
详解JavaScript 事件流
2020/09/02 Javascript
node中短信api实现验证码登录的示例代码
2021/01/20 Javascript
Python深入学习之闭包
2014/08/31 Python
解决Django模板无法使用perms变量问题的方法
2017/09/10 Python
Python实现的维尼吉亚密码算法示例
2018/04/12 Python
使用Python通过win32 COM打开Excel并添加Sheet的方法
2018/05/02 Python
基于OpenCV python3实现证件照换背景的方法
2019/03/22 Python
boostrap modal 闪现问题的解决方法
2020/09/01 HTML / CSS
Surfdome西班牙:世界上最受欢迎的生活方式品牌
2019/02/13 全球购物
北京某公司的.net笔试题
2014/03/20 面试题
个人求职信范文分享
2013/12/13 职场文书
千元咖啡店的创业计划书范文
2013/12/29 职场文书
争先创优演讲稿
2014/09/15 职场文书
医院领导班子整改方案
2014/10/01 职场文书
2014年个人工作总结范文
2014/11/07 职场文书
Vue中使用import进行路由懒加载的原理分析
2022/04/01 Vue.js
Java实现简单小画板
2022/06/10 Java/Android