基于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 返回时间戳所对应的具体时间
Jul 20 Javascript
JavaScript XML和string相互转化实现代码
Jul 04 Javascript
jQuery 浮动导航菜单适合购物商品类型的网站
Sep 09 Javascript
JavaScript 监控微信浏览器且自带返回按钮时间
Nov 27 Javascript
Bootstrap模态框(Modal)实现过渡效果
Mar 17 Javascript
实现div内部滚动条滚动到底部和顶部的代码
Nov 15 Javascript
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
JavaScript学习笔记之数组基本操作示例
Jan 09 Javascript
详解使用React制作一个模态框
Mar 14 Javascript
JavaScript偏函数与柯里化实例详解
Mar 27 Javascript
vue-router的两种模式的区别
May 30 Javascript
JS前端canvas交互实现拖拽旋转及缩放示例
Aug 05 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
文章推荐系统(三)
2006/10/09 PHP
php操作xml入门之xml基本介绍及xml标签元素
2015/01/23 PHP
PHP使用递归按层级查找数据的方法
2019/11/10 PHP
PHP执行系统命令函数实例讲解
2021/03/03 PHP
用jscript实现列出安装的软件列表
2007/06/18 Javascript
JavaScript中几种常见排序算法小结
2011/02/22 Javascript
jQuery仿Excel表格编辑功能的实现代码
2013/05/01 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
2014/01/28 Javascript
js对象的复制继承实例
2015/01/10 Javascript
js查看一个函数的执行时间实例代码
2015/09/12 Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
2016/08/31 Javascript
解析JavaScript实现DDoS攻击原理与保护措施
2016/12/26 Javascript
微信小程序 JS动态修改样式的实现代码
2017/02/10 Javascript
浅谈js中function的参数默认值
2017/02/20 Javascript
jQuery实现导航回弹效果
2017/02/27 Javascript
VueJs监听window.resize方法示例
2018/01/17 Javascript
微信小程序实现文件、图片上传功能
2020/08/18 Javascript
微信小程序之左右布局的实现代码
2019/12/13 Javascript
Vuex的热更替如何实现
2020/06/05 Javascript
js面试题之异步问题的深入理解
2020/09/20 Javascript
[02:31]DOTA2帕克 英雄基础教程
2013/11/26 DOTA
pyqt4教程之实现windows窗口小示例分享
2014/03/07 Python
Python中的defaultdict与__missing__()使用介绍
2018/02/03 Python
Django学习笔记之ORM基础教程
2018/03/27 Python
解决pycharm界面不能显示中文的问题
2018/05/23 Python
Python 创建新文件时避免覆盖已有的同名文件的解决方法
2018/11/16 Python
Python银行系统实战源码
2019/10/25 Python
世界最大的票务市场:viagogo
2017/02/16 全球购物
美国在线自行车商店:Jenson USA
2018/05/22 全球购物
严选全球尖货,立足香港:Bonpont宝盆
2018/07/24 全球购物
Groupon法国官方网站:特卖和网上购物高达-70%
2019/09/02 全球购物
《四季》教学反思
2014/04/08 职场文书
关于晚自习早退的检讨书
2014/09/13 职场文书
毕业设计论文致谢词
2015/05/14 职场文书
2015年房产经纪人工作总结
2015/05/15 职场文书
Python图片处理之图片裁剪教程
2021/05/27 Python