基于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实现页面打印功能实例代码(附去页眉页脚功能代码)
Dec 15 Javascript
JS模拟面向对象全解(一、类型及传递)
Jul 13 Javascript
onbeforeunload与onunload事件异同点总结
Jun 24 Javascript
asp.net+js实现金额格式化
Feb 27 Javascript
jQuery EasyUI实现右键菜单变灰不可用效果
Sep 24 Javascript
浅析Ajax语法
Dec 05 Javascript
windows下vue-cli及webpack搭建安装环境
Apr 25 Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
Sep 27 Javascript
vue将后台数据时间戳转换成日期格式
Jul 31 Javascript
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
jdk1.8+vue elementui实现多级菜单功能
Sep 24 Javascript
JavaScript构造函数原理及实现流程解析
Nov 19 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
ThinkPHP中order()使用方法详解
2016/04/19 PHP
Docker配置PHP开发环境教程
2016/12/21 PHP
验证javascript中Object和Function的关系的三段简单代码
2010/06/27 Javascript
jQuery表单获取和失去焦点输入框提示效果的实例代码
2013/08/01 Javascript
JS+CSS实现一个气泡提示框
2013/08/18 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
2014/01/31 Javascript
js设置控件的隐藏与显示的两种方法
2014/08/21 Javascript
为什么Node.js会这么火呢?Node.js流行的原因
2014/12/01 Javascript
laypage分页控件使用实例详解
2016/05/19 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
2016/06/12 Javascript
详细分析Javascript中创建对象的四种方式
2016/08/17 Javascript
js实现百度搜索提示框
2017/02/05 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
2017/03/02 Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
2017/06/23 Javascript
JavaScript 中的12种循环遍历方法【总结】
2018/05/31 Javascript
微信小程序页面缩放式侧滑效果的实现代码
2018/11/15 Javascript
JavaScript变速动画函数封装添加任意多个属性
2019/04/03 Javascript
如何实现vue的tree组件
2020/12/03 Vue.js
[03:48]大碗DOTA
2019/07/25 DOTA
Django框架中的对象列表视图使用示例
2015/07/21 Python
新手常见6种的python报错及解决方法
2018/03/09 Python
Pycharm中出现ImportError:DLL load failed:找不到指定模块的解决方法
2019/09/17 Python
Python反爬虫伪装浏览器进行爬虫
2020/02/28 Python
python3将变量写入SQL语句的实现方式
2020/03/02 Python
使用OpenCV获取图像某点的颜色值,并设置某点的颜色
2020/06/02 Python
python用什么编辑器进行项目开发
2020/06/17 Python
Python 如何创建一个线程池
2020/07/28 Python
python如何利用paramiko执行服务器命令
2020/11/07 Python
python3处理word文档实例分析
2020/12/01 Python
HTML5之SVG 2D入门4—笔画与填充
2013/01/30 HTML / CSS
大型晚会策划方案
2014/02/06 职场文书
协会周年庆活动方案
2014/08/26 职场文书
停课通知书
2015/04/24 职场文书
2015年副班长工作总结
2015/05/15 职场文书
2016年幼儿园教师师德承诺书
2016/03/25 职场文书
Spring Boot 启动、停止、重启、状态脚本
2021/06/26 Java/Android