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入门教程(7) History历史对象
Jan 31 Javascript
javascript Keycode对照表
Oct 24 Javascript
jQuery之日期选择器的深入解析
Jun 19 Javascript
JavaScript实现简单的二级导航菜单实例
Apr 15 Javascript
JavaScript头像上传插件源码分享
Mar 29 Javascript
用JS实现轮播图效果(二)
Jun 26 Javascript
js字符串操作总结(必看篇)
Nov 22 Javascript
Bootstrap实现各种进度条样式详解
Apr 13 Javascript
使用Bootstrap打造特色进度条效果
May 02 Javascript
JS复杂判断的更优雅写法代码详解
Nov 07 Javascript
详解JavaScript栈内存与堆内存
Apr 04 Javascript
Element-ui DatePicker显示周数的方法示例
Jul 19 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网站在线人数统计
2008/04/09 PHP
在PHP中检查PHP文件是否有语法错误的方法
2009/12/23 PHP
PHP之数组学习
2011/05/29 PHP
php各种编码集详解和以及在什么情况下进行使用
2011/09/11 PHP
php实现可以设置中奖概率的抽奖程序代码分享
2014/01/19 PHP
php简单实现多语言切换的方法
2016/05/09 PHP
javascript(jquery)利用函数修改全局变量的代码
2009/11/02 Javascript
比较详细的关于javascript 解析json的代码
2009/12/16 Javascript
javascript 从if else 到 switch case 再到抽象
2010/07/17 Javascript
关于onScroll事件在IE6下每次滚动触发三次bug说明
2011/09/21 Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
2015/08/24 Javascript
详解JS面向对象编程
2016/01/24 Javascript
分享两段简单的JS代码防止SQL注入
2016/04/12 Javascript
react实现菜单权限控制的方法
2017/12/11 Javascript
vue实现验证码输入框组件
2017/12/14 Javascript
在Vue 中使用Typescript的示例代码
2018/09/10 Javascript
javascript实现简易的计算器
2020/01/17 Javascript
vue中destroyed方法的使用说明
2020/07/21 Javascript
python根据经纬度计算距离示例
2014/02/16 Python
Python 专题二 条件语句和循环语句的基础知识
2017/03/19 Python
Python set常用操作函数集锦
2017/11/15 Python
python实现桌面壁纸切换功能
2019/01/21 Python
selenium+python自动化测试之页面元素定位
2019/01/23 Python
使用Python制作新型冠状病毒实时疫情图
2020/01/28 Python
pyspark给dataframe增加新的一列的实现示例
2020/04/24 Python
python包的导入方式总结
2021/03/02 Python
BrandAlley英国:法国折扣奢侈品网上零售商
2017/07/03 全球购物
幼儿园教师培训方案
2014/02/04 职场文书
三分钟演讲稿范文
2014/04/24 职场文书
2014年度安全生产目标管理责任书
2014/07/25 职场文书
政风行风评议工作总结
2014/10/21 职场文书
世界名著读书笔记
2015/06/25 职场文书
2016中秋节广告语
2016/01/28 职场文书
python实现三阶魔方还原的示例代码
2021/04/28 Python
MySql存储过程之逻辑判断和条件控制
2021/05/26 MySQL
Python+pyaudio实现音频控制示例详解
2022/07/23 Python