javascript基于DOM实现省市级联下拉框的方法


Posted in Javascript onMay 14, 2015

本文实例讲述了javascript基于DOM实现省市级联下拉框的方法。分享给大家供大家参考。具体实现方法如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>省市级联下拉框</title>
<script type="text/javascript">
var provs = { "江西省": ["南昌市", "景德镇", "九江", "鹰潭", "萍乡", "新馀", "赣州", "吉安", "宜春", "抚州", "上饶"],
  "福建省": ["福州", "厦门", "莆田", "三明", "泉州", "漳州", "南平", "龙岩", "宁德"],
  "河北省": ["石家庄", "邯郸", "邢台", "保定", "张家口", "承德", "廊坊", "唐山", "秦皇岛", "沧州", "衡水"]
};
function loadProv() {
  //加载省份数据
  var prov = document.getElementById("prov");
  for (var key in provs) {
    var provName = key;
    var optProv = document.createElement("option");
    optProv.value = provName;
    optProv.innerText = provName;
    prov.appendChild(optProv);
  }
}
function provChange() {
  var prov = document.getElementById("prov");
  var city = document.getElementById("city");
  var provName = prov.value;
  //如果没有选择省份,则把城市下拉框隐藏
  if (provName == "none") {
    city.style.display = "none";
    return;
  }
  else {
    city.style.display = "";
  }
  var citys = provs[provName];
  //city.options.length = 0;
  //用这种方法也可以清空原始列表
  //清空城市的原始数据
  for (var i = city.childNodes.length - 1; i >= 0; i--) {
    var child = city.childNodes[i];
    city.removeChild(child);
  }
  //添加新的城市数据
  for (var i = 0; i < citys.length; i++) {
    var optCity = document.createElement("option");
    optCity.value = citys[i];
    optCity.innerText = citys[i];
    city.appendChild(optCity);
  }
}
</script>
</head>
<body onload="loadProv()">
<select id="prov" onchange="provChange()">
<option value="none">请选择省</option>
</select>
<select id="city" style="display:none"></select>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
一个可以随意添加多个序列的tag函数
Jul 21 Javascript
js arguments对象应用介绍
Nov 28 Javascript
关于Javascript与iframe的那些事儿
Jul 04 Javascript
jquery日历控件实现方法分享
Mar 07 Javascript
js控制文本框输入的字符类型方法汇总
Jun 19 Javascript
JS实现从连接中获取youtube的key实例
Jul 02 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
Nov 12 Javascript
jQuery实现的分页功能示例
Jan 22 Javascript
vue中如何实现变量和字符串拼接
Jun 19 Javascript
Angularjs中date过滤器失效的问题及解决方法
Jul 06 Javascript
详解微信小程序开发用户授权登陆
Apr 24 Javascript
Vue实现tab导航栏并支持左右滑动功能
Jun 28 Vue.js
javascript搜索框效果实现方法
May 14 #Javascript
javascript操作ul中li的方法
May 14 #Javascript
javascript中createElement的两种创建方式
May 14 #Javascript
javascript常用方法总结
May 14 #Javascript
javascript实现动态改变层大小的方法
May 14 #Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
May 14 #Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
May 13 #Javascript
You might like
天津市收音机工业发展史
2021/03/04 无线电
PHP 编程的 5个良好习惯
2009/02/20 PHP
php简单计算页面加载时间的方法
2015/06/19 PHP
PHP开发实现微信退款功能示例
2017/11/25 PHP
用JavaScript获取网页中的js、css、Flash等文件
2006/12/20 Javascript
给moz-firefox下添加IE方法和属性
2007/04/10 Javascript
网页图片延时加载的js代码
2010/04/22 Javascript
JavaScript实现页面实时显示当前时间的简单实例
2013/07/20 Javascript
javascript的渐进增强与平稳退化浅谈
2013/11/12 Javascript
jquery checkbox的相关操作总结
2016/10/17 Javascript
使用Curl命令查看请求响应时间方法
2016/11/04 Javascript
JS日程管理插件FullCalendar简单实例
2017/02/07 Javascript
js中变量的连续赋值(实例讲解)
2017/07/08 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
2018/07/05 Javascript
如何安装控制器JavaScript生成插件详解
2018/10/21 Javascript
Element Cascader 级联选择器的使用示例
2020/07/27 Javascript
Python Trie树实现字典排序
2014/03/28 Python
介绍Python中的一些高级编程技巧
2015/04/02 Python
python实现爬虫统计学校BBS男女比例之多线程爬虫(二)
2015/12/31 Python
使用Django和Python创建Json response的方法
2018/03/26 Python
python使用magic模块进行文件类型识别方法
2018/12/08 Python
python opencv判断图像是否为空的实例
2019/01/26 Python
详解Python Matplotlib解决绘图X轴值不按数组排序问题
2019/08/05 Python
详解Django CAS 解决方案
2019/10/30 Python
Python3.7黑帽编程之病毒篇(基础篇)
2020/02/04 Python
Python中过滤字符串列表的方法
2020/12/22 Python
UNIX文件系统分类
2014/11/11 面试题
新闻专业应届生求职信
2013/10/31 职场文书
财务出纳员岗位职责
2013/11/26 职场文书
社会学专业求职信
2014/07/17 职场文书
商场促销活动策划方案
2014/08/18 职场文书
运动会广播稿诗歌版
2014/09/12 职场文书
民主生活会对照检查材料(统计局)
2014/09/21 职场文书
质量保证书怎么写
2015/02/27 职场文书
关于国庆节的广播稿
2015/08/19 职场文书
MySQL窗口函数的具体使用
2021/11/17 MySQL