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 相关文章推荐
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
May 27 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
Feb 26 Javascript
浅谈Node.js中的定时器
Jun 18 Javascript
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
Dec 23 Javascript
很棒的Bootstrap选项卡切换效果
Jul 01 Javascript
终于实现了!精彩的jquery弹幕效果
Jul 18 Javascript
JS中BOM相关知识点总结(必看篇)
Nov 22 Javascript
认识jQuery的Promise的具体使用方法
Oct 10 jQuery
浅谈layer弹出层按钮颜色修改方法
Sep 11 Javascript
JS实现拼图游戏
Jan 29 Javascript
JavaScript Event Loop相关原理解析
Jun 10 Javascript
解决vue自定义组件@click点击失效问题
Apr 30 Vue.js
基于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 创建以UNIX时间戳命名的文件夹(示例代码)
2014/03/08 PHP
WordPress开发中用于标题显示的相关函数使用解析
2016/01/07 PHP
Laravel 实现Controller向blade前台模板赋值的四种方式小结
2019/10/22 PHP
一段批量给页面上的控件赋值js
2010/06/19 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
2013/04/24 Javascript
jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
2014/04/10 Javascript
EasyUI实现第二层弹出框的方法
2015/03/01 Javascript
JQuery中节点遍历方法实例
2015/05/18 Javascript
AngularJS转换响应内容
2016/01/27 Javascript
微信小程序 form组件详解及简单实例
2017/01/10 Javascript
使用原生js+canvas实现模拟心电图的实例
2017/09/20 Javascript
jQuery实现的事件绑定功能基本示例
2017/10/11 jQuery
vue-router路由懒加载的实现(解决vue项目首次加载慢)
2018/08/28 Javascript
JS浏览器BOM常见操作实例详解
2020/04/27 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
2020/04/28 Javascript
js实现九宫格布局效果
2020/05/28 Javascript
vue样式穿透 ::v-deep的具体使用
2020/06/04 Javascript
python中bisect模块用法实例
2014/09/25 Python
Python将图片批量从png格式转换至WebP格式
2020/08/22 Python
python+matplotlib实现动态绘制图片实例代码(交互式绘图)
2018/01/20 Python
python os用法总结
2018/06/08 Python
Matplotlib中文乱码的3种解决方案
2018/11/15 Python
PyQt打开保存对话框的方法和使用详解
2019/02/27 Python
Django 重写用户模型的实现
2019/07/29 Python
python科学计算之numpy——ufunc函数用法
2019/11/25 Python
Anaconda+vscode+pytorch环境搭建过程详解
2020/05/25 Python
python else语句在循环中的运用详解
2020/07/06 Python
Python基于httpx模块实现发送请求
2020/07/07 Python
基于Python实现下载网易音乐代码实例
2020/08/10 Python
全球采购的街头服饰和帽子:Urban Excess
2020/10/28 全球购物
GWT (Google Web Toolkit)有哪些主要的原件组成?
2015/06/08 面试题
卫生院艾滋病宣传活动小结
2014/07/09 职场文书
党员干部形式主义个人整改措施
2014/09/17 职场文书
低端且暴利的线上线下创业项目分享
2019/09/03 职场文书
python套接字socket通信
2022/04/01 Python
Win11如何默认打开软件界面最大化?Win11默认打开软件界面最大化的方法
2022/07/15 数码科技