基于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 不间断的图片滚动并可点击
Jan 15 Javascript
js操作textarea方法集合封装(兼容IE,firefox)
Feb 22 Javascript
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
Dec 26 Javascript
超详细的javascript数组方法汇总
Nov 21 Javascript
学习JavaScript设计模式之状态模式
Jan 08 Javascript
Jquery uploadify上传插件使用详解
Jan 13 Javascript
完美解决IE不支持Data.parse()的问题
Nov 24 Javascript
js中开关变量使用实例
Feb 24 Javascript
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
Apr 28 Javascript
webpack中使用iconfont字体图标的方法
Feb 22 Javascript
Vue表单demo v-model双向绑定问题
Jun 29 Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
Mar 04 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
人族 Terran 魔法与科技
2020/03/14 星际争霸
在php中取得image按钮传递的name值
2006/10/09 PHP
基于thinkPHP框架实现留言板的方法
2016/10/17 PHP
iOS+PHP注册登录系统 PHP部分(上)
2016/12/26 PHP
javascript时区函数介绍
2012/09/14 Javascript
表格单元格交错着色实现思路及代码
2013/04/01 Javascript
javascript显示用户停留时间的简单实例
2013/08/05 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
2014/06/12 Javascript
jQuery常用操作方法及常用函数总结
2014/06/19 Javascript
nodejs npm package.json中文文档
2014/09/04 NodeJs
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
2016/09/23 Javascript
Vue自定义指令详解
2017/07/28 Javascript
微信小程序-滚动消息通知的实例代码
2017/08/03 Javascript
jquery ztree实现右键收藏功能
2017/11/20 jQuery
AngularJS集合数据遍历显示的实例
2017/12/27 Javascript
Node.js readline模块与util模块的使用
2018/03/01 Javascript
基于vue-simplemde实现图片拖拽、粘贴功能
2018/04/12 Javascript
浅谈super-vuex使用体验
2018/06/25 Javascript
vue+element的表格实现批量删除功能示例代码
2018/08/17 Javascript
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
2019/05/09 Javascript
Vue学习之组件用法实例详解
2020/01/06 Javascript
Javascript表单序列化原理及实现代码详解
2020/10/30 Javascript
python下载文件时显示下载进度的方法
2015/04/02 Python
Python中subprocess的简单使用示例
2015/07/28 Python
Python进阶-函数默认参数(详解)
2017/05/18 Python
Python实现完整的事务操作示例
2017/06/20 Python
在Pandas中处理NaN值的方法
2019/06/25 Python
Python类中self参数用法详解
2020/02/13 Python
浅谈Python描述数据结构之KMP篇
2020/09/06 Python
python爬虫破解字体加密案例详解
2021/03/02 Python
HTML 5 input placeholder 属性如何完美兼任ie
2014/05/12 HTML / CSS
机关道德讲堂实施方案
2014/03/15 职场文书
公司财务部岗位职责
2015/04/14 职场文书
春节晚会开场白
2015/05/29 职场文书
丧事答谢词大全
2015/09/30 职场文书
html form表单基础入门案例讲解
2021/07/15 HTML / CSS