基于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 相关文章推荐
锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
Mar 23 Javascript
JQuery 动态扩展对象之另类视角
May 25 Javascript
file模式访问网页时iframe高度自适应解决方案
Jan 16 Javascript
javascript四舍五入函数代码分享(保留后几位)
Dec 10 Javascript
动态加载js、css等文件跨iframe实现
Feb 24 Javascript
JavaScript 正则表达式中global模式的特性
Feb 25 Javascript
基于Bootstrap实现tab标签切换效果
Apr 15 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
May 02 Javascript
浅谈vue项目如何打包扔向服务器
May 08 Javascript
js 实现在2d平面上画8的方法
Oct 10 Javascript
vue-router 路由传参用法实例分析
Mar 06 Javascript
Vue 实现v-for循环的时候更改 class的样式名称
Jul 17 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重定向的3种方式
2013/03/07 PHP
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
2010/06/19 Javascript
JQuery onload、ready概念介绍及使用方法
2013/04/27 Javascript
jQuery 三击事件实现代码
2013/09/11 Javascript
js window.print实现打印特定控件或内容
2013/09/16 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
2014/10/17 Javascript
javascript原型链继承用法实例分析
2015/01/28 Javascript
JS实现的4种数字千位符格式化方法分享
2015/03/02 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
2016/06/01 Javascript
Knockoutjs 学习系列(二)花式捆绑
2016/06/07 Javascript
JavaScript页面实时显示当前时间实例代码
2016/10/23 Javascript
微信小程序 跳转传递数据的实例
2017/07/06 Javascript
使用veloticy-ui生成文字动画效果
2018/02/08 Javascript
AngularJS实现的base64编码与解码功能示例
2018/05/17 Javascript
vue移动端弹框组件的实例
2018/09/25 Javascript
使用nodejs分离html文件里的js和css详解
2019/04/12 NodeJs
使用vue3重构拼图游戏的实现示例
2021/01/25 Vue.js
[02:38]DOTA2超级联赛专访Loda 认为IG世界最强
2013/05/27 DOTA
python黑魔法之参数传递
2016/02/12 Python
python写入并获取剪切板内容的实例
2018/05/31 Python
Django框架反向解析操作详解
2019/11/28 Python
css3边框_动力节点Java学院整理
2017/07/11 HTML / CSS
英国轻奢珠宝品牌:Astley Clarke
2016/12/18 全球购物
美国最大的旗帜经销商:Carrot-Top
2018/02/26 全球购物
世界上最值得信赖的多日游在线市场:TourRadar
2018/07/20 全球购物
英国门把手公司:Door Handle Company
2019/05/12 全球购物
公司年会晚宴演讲稿
2014/01/06 职场文书
销售演讲稿范文
2014/01/08 职场文书
四个太阳教学反思
2014/02/01 职场文书
学校课外活动总结
2014/05/08 职场文书
给校长的建议书600字
2014/05/15 职场文书
上课睡觉检讨书300字
2014/11/18 职场文书
培根随笔读书笔记
2015/07/01 职场文书
大学生暑期实践报告
2015/07/13 职场文书
Python制作表白爱心合集
2022/01/22 Python
win11无法登录onedrive错误代码0x8004def7怎么办 ?
2022/04/05 数码科技