基于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 相关文章推荐
js内置对象 学习笔记
Aug 01 Javascript
关于scrollLeft,scrollTop的浏览器兼容性测试
Mar 19 Javascript
JS Map 和 List 的简单实现代码
Jul 08 Javascript
Jquery结合HTML5实现文件上传
Jun 25 Javascript
浅谈jQuery 选择器和dom操作
Jun 07 Javascript
JS实现动画兼容性的transition和transform实例分析
Dec 13 Javascript
vue省市区三联动下拉选择组件的实现
Apr 28 Javascript
Angular2 组件交互实例详解
Aug 24 Javascript
Flutter 超实用简单菜单弹出框 PopupMenuButton功能
Aug 06 Javascript
Centos7 安装Node.js10以上版本的方法步骤
Oct 15 Javascript
解决 window.onload 被覆盖的问题方法
Jan 14 Javascript
JS实现页面数据懒加载
Feb 13 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
php minixml详解
2008/07/19 PHP
详解php魔术方法(Magic methods)的使用方法
2016/02/14 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
javascript中String类的subString()方法和slice()方法
2011/05/24 Javascript
javascript开发随笔二 动态加载js和文件
2011/11/25 Javascript
jQuery Tools Dateinput使用介绍
2012/07/14 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/25 Javascript
jquery获取复选框被选中的值
2014/03/22 Javascript
jQuery大于号(&gt;)选择器的作用解释
2015/01/13 Javascript
angularJS 入门基础
2015/02/09 Javascript
了解Javascript的模块化开发
2015/03/02 Javascript
举例简介AngularJS的内部语言环境
2015/06/17 Javascript
seajs加载jquery时提示$ is not a function该怎么解决
2015/10/23 Javascript
详解JavaScript中的Unescape()和String() 函数
2015/11/09 Javascript
js select实现省市区联动选择
2020/04/17 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
2016/10/24 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
2017/01/06 Javascript
jquery——九宫格大转盘抽奖实例
2017/01/16 Javascript
简单实现bootstrap选项卡效果
2017/02/08 Javascript
JavaScript 中的12种循环遍历方法【总结】
2018/05/31 Javascript
微信小程序手机号码验证功能的实例代码
2018/08/28 Javascript
Vue-component全局注册实例
2018/09/06 Javascript
如何解决.vue文件url引用文件的问题
2019/01/18 Javascript
Node.js爬虫如何获取天气和每日问候详解
2019/08/26 Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
2020/04/03 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
2020/09/21 Javascript
前端 javascript 实现文件下载的示例
2020/11/24 Javascript
详解python中的线程
2018/02/10 Python
python实现多线程网页下载器
2018/04/15 Python
numpy.std() 计算矩阵标准差的方法
2018/07/11 Python
Django {{ MEDIA_URL }}无法显示图片的解决方式
2020/04/07 Python
python 基于opencv 实现一个鼠标绘图小程序
2020/12/11 Python
HTML5如何使用SVG的方法示例
2019/01/11 HTML / CSS
培训主管的岗位职责
2013/11/23 职场文书
院党委组织查摆问题对照检查材料思想汇报2014
2014/10/08 职场文书
mysql的数据压缩性能对比详情
2021/11/07 MySQL