基于js实现二级下拉联动


Posted in Javascript onDecember 17, 2016

本文实例为大家分享了js下拉联动的具体代码,供大家参考,具体内容如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
</head> 
 
<body> 
 
 
<select id="chengshi" onChange="change()"> 
 <option selected="selected">上海</option> 
 <option>苏州</option> 
</select> 
 
<select id="quxian"> 
 <option selected="selected">浦东新区</option>  
<option>徐汇</option> 
<option>长宁</option> 
<option>普陀</option> 
<option>闸北</option> 
<option>虹口</option> 
<option>杨浦</option> 
<option>黄浦</option> 
<option>卢湾</option> 
<option>静安</option> 
<option>宝山</option> 
<option>闵行</option> 
<option>嘉定</option> 
<option>金山</option> 
<option>松江</option> 
<option>青浦</option> 
<option>南汇</option> 
<option>奉贤</option> 
<option>崇明</option> 
 
</select> 
 
 
<script> 
function change() 
{ 
 var x = document.getElementById("chengshi"); 
 var y = document.getElementById("quxian"); 
 y.options.length = 0; // 清除second下拉框的所有内容 
 if(x.selectedIndex == 0) 
 { 
  y.options.add(new Option("浦东新区", "0", false, true)); 
  y.options.add(new Option("徐汇", "1")); // 默认选中省会城市 
  y.options.add(new Option("长宁", "2")); 
  y.options.add(new Option("普陀", "3")); 
  y.options.add(new Option("闸北", "4")); 
  y.options.add(new Option("虹口", "5")); 
  y.options.add(new Option("杨浦", "6")); 
  y.options.add(new Option("黄浦", "7")); 
  y.options.add(new Option("卢湾", "8")); 
  y.options.add(new Option("静安", "9")); 
  y.options.add(new Option("宝山", "10")); 
  y.options.add(new Option("闵行", "11")); 
  y.options.add(new Option("嘉定", "12")); 
  y.options.add(new Option("金山", "13")); 
  y.options.add(new Option("松江", "14")); 
  y.options.add(new Option("青浦", "15")); 
  y.options.add(new Option("南汇", "16")); 
  y.options.add(new Option("奉贤", "17")); 
  y.options.add(new Option("崇明", "18")); 
  
 } 
 
 if(x.selectedIndex == 1) 
 { 
  y.options.add(new Option("辖张家港市", "0", false, true)); // 辖张家港市、常熟市、太仓市、昆山市、吴江市,吴中区、相城区、平江区、沧浪区、金阊区,以及苏州工业园区和苏州高新区虎丘区。 
  y.options.add(new Option("常熟市", "1")); // 默认选中省会城市 
  y.options.add(new Option("太仓市", "2")); 
  y.options.add(new Option("昆山市", "3")); 
  y.options.add(new Option("吴江市", "4")); 
  y.options.add(new Option("吴中区", "5")); 
  y.options.add(new Option("相城区", "6")); 
  y.options.add(new Option("平江区", "7")); 
  y.options.add(new Option("沧浪区", "8")); 
  y.options.add(new Option("金阊区", "9")); 
  y.options.add(new Option("苏州工业园区", "10")); 
  y.options.add(new Option("苏州高新区", "11")); 
  y.options.add(new Option("虎丘区", "12")); 
 } 
 
} 
</script> 
  
</body> 
</html>

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

Javascript 相关文章推荐
用javascript判断IE版本号简单实用且向后兼容
Sep 11 Javascript
详解JavaScript编程中正则表达式的使用
Oct 25 Javascript
ES6中如何使用Set和WeakSet
Mar 10 Javascript
JS Attribute属性操作详解
May 19 Javascript
JavaScript事件用法浅析
Oct 31 Javascript
Javascript 两种刷新方法以及区别和适用范围
Jan 17 Javascript
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 jQuery
JS面向对象编程基础篇(一) 对象和构造函数实例详解
Mar 03 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
May 24 Javascript
基于VUE实现判断设备是PC还是移动端
Jul 03 Javascript
js实现扫雷源代码
Nov 27 Javascript
JavaScript实现简单的音乐播放器
Aug 14 Javascript
文件上传的几个示例分享【推荐】
Dec 16 #Javascript
JavaScript实现格式化字符串函数String.format
Dec 16 #Javascript
详解jQuery uploadify文件上传插件的使用方法
Dec 16 #Javascript
JS搜狐面试题分析
Dec 16 #Javascript
JS重载实现方法分析
Dec 16 #Javascript
概述一个页面从输入URL到页面加载完的过程
Dec 16 #Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
Dec 16 #Javascript
You might like
批量获取memcache值并按key的顺序返回的实现代码
2011/06/14 PHP
Symfony学习十分钟入门经典教程
2016/02/03 PHP
Zend Framework框架实现类似Google搜索分页效果
2016/11/25 PHP
老生常谈PHP面向对象之解释器模式
2017/05/17 PHP
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
2014/03/20 Javascript
javascript无刷新评论实现方法
2015/05/13 Javascript
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
2015/08/21 Javascript
有关Promises异步问题详解
2015/11/13 Javascript
jQuery设置Easyui校验规则(推荐)
2016/11/21 Javascript
js通过指定下标或指定元素进行删除数组的实例
2017/01/12 Javascript
使用jQuery卸载全部事件的思路详解
2017/04/03 jQuery
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
2018/01/25 Javascript
JS装饰器函数用法总结
2018/04/21 Javascript
vue-cli项目修改文件热重载失效的解决方法
2018/09/19 Javascript
GOJS+VUE实现流程图效果
2018/12/01 Javascript
JS获取月的第几周和年的第几周实例代码
2018/12/05 Javascript
jQuery实现侧边栏隐藏与显示的方法详解
2018/12/22 jQuery
[44:47]Ti4 循环赛第三日 iG vs NaVi
2014/07/12 DOTA
python计算程序开始到程序结束的运行时间和程序运行的CPU时间
2013/11/28 Python
Python输出PowerPoint(ppt)文件中全部文字信息的方法
2015/04/28 Python
详细解读Python中的__init__()方法
2015/05/02 Python
PyQt5 对图片进行缩放的实例
2019/06/18 Python
python开启debug模式的方法
2019/06/27 Python
python基于socket进行端口转发实现后门隐藏的示例
2019/07/25 Python
利用Python裁切tiff图像且读取tiff,shp文件的实例
2020/03/10 Python
PythonPC客户端自动化实现原理(pywinauto)
2020/05/28 Python
python怎么提高计算速度
2020/06/11 Python
css3绘制天猫logo实现代码
2012/11/06 HTML / CSS
详解Html5页面实现下载文件(apk、txt等)的三种方式
2018/10/22 HTML / CSS
联想新西兰官方网站:Lenovo New Zealand
2018/10/30 全球购物
经济信息管理专业大学生求职信
2013/09/27 职场文书
考试违纪检讨书
2014/02/02 职场文书
公交公司毕业生求职信
2014/02/15 职场文书
敬老月活动总结
2014/08/28 职场文书
浅谈Redis存储数据类型及存取值方法
2021/05/08 Redis
每日六道java新手入门面试题,通往自由的道路
2021/06/30 Java/Android