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 相关文章推荐
JS解析XML的实现代码
Nov 12 Javascript
jQuery中校验时间格式的正则表达式小结
Sep 22 Javascript
javascript简单性能问题及学习笔记
Feb 04 Javascript
超链接的禁用属性Disabled使用示例
Jul 31 Javascript
javascript闭包的理解
Apr 01 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
Nov 02 Javascript
jquery利用json实现页面之间传值的实例解析
Dec 12 Javascript
详解vue-cli与webpack结合如何处理静态资源
Sep 19 Javascript
Vue2.0+ElementUI实现表格翻页的实例
Oct 23 Javascript
vue中的计算属性实例详解
Sep 19 Javascript
微信小程序加载机制及运行机制图解
Nov 27 Javascript
el-table树形表格表单验证(列表生成序号)
May 31 Javascript
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
索尼SONY ICF-SW7600GR电路分析与改良
2021/03/02 无线电
浅析linux下apache服务器的配置和管理
2013/08/10 PHP
php根据日期判断星座的函数分享
2014/02/13 PHP
yii数据库的查询方法
2015/12/28 PHP
详解PHP的Yii框架的运行机制及其路由功能
2016/03/17 PHP
javascript StringBuilder类实现
2008/12/22 Javascript
JavaScript 对象成员的可见性说明
2009/10/16 Javascript
jquery的键盘事件修改代码
2011/02/24 Javascript
javascript学习笔记(十七) 检测浏览器插件代码
2012/06/20 Javascript
js数组与字符串的相互转换方法
2014/07/09 Javascript
JavaScript中使用Object.prototype.toString判断是否为数组
2015/04/01 Javascript
基于JavaScript实现移除(删除)数组中指定元素
2016/01/04 Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
2016/02/25 Javascript
js完整倒计时代码分享
2016/09/18 Javascript
jquery实现输入框实时输入触发事件代码
2016/12/21 Javascript
vue click.stop阻止点击事件继续传播的方法
2018/09/04 Javascript
详解Eslint 配置及规则说明
2018/09/10 Javascript
在vue中使用v-bind:class的选项卡方法
2018/09/27 Javascript
35个最好用的Vue开源库(史上最全)
2019/01/03 Javascript
微信小程序保存多张图片的实现方法
2019/03/05 Javascript
vue + typescript + 极验登录验证的实现方法
2019/06/27 Javascript
ant design vue导航菜单与路由配置操作
2020/10/28 Javascript
[14:51]DOTA2 HEROS教学视频教你分分钟做大人-卓尔游侠
2014/06/13 DOTA
[02:51]2018年度DOTA2最佳中单位选手-完美盛典
2018/12/17 DOTA
python实现将内容分行输出
2015/11/05 Python
python print输出延时,让其立刻输出的方法
2019/01/07 Python
Python批量删除只保留最近几天table的代码实例
2019/04/01 Python
Python 中Django验证码功能的实现代码
2019/06/20 Python
Python split() 函数拆分字符串将字符串转化为列的方法
2019/07/16 Python
python中Lambda表达式详解
2019/11/20 Python
七匹狼男装广告词
2014/03/21 职场文书
《孙权劝学》教学反思
2014/04/23 职场文书
收入及婚姻状况证明
2014/11/20 职场文书
2014年电厂工作总结
2014/12/04 职场文书
国家助学金感谢信
2015/01/21 职场文书
律师函格式范本
2015/05/27 职场文书