基于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 三种方法实现获得和设置以及移除元素属性
Mar 20 Javascript
iframe子页面与父页面在同域或不同域下的js通信
May 07 Javascript
JS的数组迭代方法
Feb 05 Javascript
JavaScript性能优化之小知识总结
Nov 20 Javascript
js简单判断flash是否加载完成的方法
Jun 21 Javascript
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 jQuery
百度地图去掉marker覆盖物或者去掉maker的label文字方法
Jan 26 Javascript
JavaScript封闭函数及常用内置对象示例
May 13 Javascript
vue-router 中 meta的用法详解
Nov 01 Javascript
js实现数字跳动到指定数字
Aug 25 Javascript
JSON 入门教程基础篇 json入门学习笔记
Sep 22 Javascript
React Native项目框架搭建的一些心得体会
May 28 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
咖啡风味 世界咖啡主要分布分布 咖啡的生长要求
2021/03/06 新手入门
一个经典的PHP文件上传类分享
2014/11/18 PHP
PHP实现微信JS-SDK接口选择相册及拍照并上传的方法
2016/12/05 PHP
基于PHP实现的多元线性回归模拟曲线算法
2018/01/30 PHP
Laravel 实现数据软删除功能
2019/08/21 PHP
javascript之对系统的toFixed()方法的修正
2007/05/08 Javascript
Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
2010/06/11 Javascript
js同比例缩放图片的小例子
2013/10/30 Javascript
JavaScript利用append添加元素报错的解决方法
2014/07/01 Javascript
jQuery中prevUntil()方法用法实例
2015/01/08 Javascript
NodeJS整合银联网关支付(DEMO)
2016/11/09 NodeJs
利用javascript如何随机生成一定位数的密码
2017/09/22 Javascript
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
2018/07/19 Javascript
es6 symbol的实现方法示例
2019/04/02 Javascript
详解JavaScript实现动态的轮播图效果
2019/04/29 Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
2019/05/05 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
2020/06/08 Javascript
Vue路由权限控制解析
2020/11/09 Javascript
python基础教程之匿名函数lambda
2017/01/17 Python
python实现维吉尼亚算法
2019/03/20 Python
使用Django xadmin 实现修改时间选择器为不可输入状态
2020/03/30 Python
在python3.64中安装pyinstaller库的方法步骤
2020/06/02 Python
纯CSS3+DIV实现小三角形边框效果的示例代码
2020/08/03 HTML / CSS
使用spring mvc+localResizeIMG实现HTML5端图片压缩上传的功能
2016/12/16 HTML / CSS
Canvas高级路径操作之拖拽对象的实现
2019/08/05 HTML / CSS
荷兰和比利时时尚鞋店:Van Dalen
2018/04/23 全球购物
英国设计的甲板鞋和船鞋:Chatham
2018/12/06 全球购物
英国索普公园票务和酒店套餐:Thorpe Breaks
2019/09/14 全球购物
信访工作经验交流材料
2014/05/23 职场文书
公关活动策划方案
2014/05/25 职场文书
幼儿园保育员责任书
2014/07/22 职场文书
美国旅游签证工作证明
2014/10/14 职场文书
干货:如何写好工作计划!
2019/05/17 职场文书
承诺书的签字人,需不需要承担相应的责任?
2019/07/09 职场文书
Django+Celery实现定时任务的示例
2021/06/23 Python
手写实现JS中的new
2021/11/07 Javascript