JavaScript省市级联下拉菜单实例


Posted in Javascript onFebruary 14, 2017

最近学了一个关于省市级联简单的小例子,贴出来与大家分享一下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>index</title>
</head>
<body>
 <select id="selProvince" onchange="changeCity()">
  <option>请选择省份</option>
 </select>
 <select id="selCity">
  <option>请选择城市</option>
 </select>
 <script>
  function $(ID){
  return document.getElementById(ID);
  }
  var cityList=new Array();
  cityList['北京市']=['东城区','西城区','昌平区'];
  cityList['河北省']=['保定','石家庄','定州'];
   cityList['江苏省'] = ['南京市','苏州市','无锡市'];
   cityList['浙江省'] = ['杭州市','宁波市','温州市'];
   cityList['四川省'] = ['四川省','成都市'];
   cityList['海南省'] = ['海口市'];
  function changeCity(){
   var province=$("selProvince").value;
   var city=$("selCity");
    city.options.length=0;
   for (var i in cityList) {
   if(i==province){
    for (var j in cityList[i]) {
     city.add(new Option(cityList[i][j],cityList[i][j]),null);
    }
   }
   }
  }
  function allCity(){
   var province=$("selProvince");
   for (var i in cityList) {
    province.add(new Option(i,i),null);
   }
  }

  window.onload=allCity;
 </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript时间函数基础介绍
Mar 28 Javascript
防止jQuery ajax Load使用缓存的方法小结
Feb 22 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
Feb 20 Javascript
原生js和jQuery实现淡入淡出轮播效果
Dec 25 Javascript
JavaScript闭包和范围实例详解
Dec 19 Javascript
ES6 Promise对象概念与用法分析
Apr 01 Javascript
HTML5实现微信拍摄上传照片功能
Apr 21 Javascript
浅谈MUI框架中加载外部网页或服务器数据的方法
Jan 31 Javascript
如何用RxJS实现Redux Form
Dec 29 Javascript
JavaScript ES6中的简写语法总结与使用技巧
Dec 30 Javascript
JavaScript私有变量实例详解
Jan 24 Javascript
你不知道的 TypeScript 高级类型(小结)
Aug 28 Javascript
jqGrid翻页时数据选中丢失问题的解决办法
Feb 13 #Javascript
jQuery实现用户输入自动完成功能
Feb 13 #Javascript
微信小程序 详解页面跳转与返回并回传数据
Feb 13 #Javascript
微信小程序 this和that详解及简单实例
Feb 13 #Javascript
脚本div实现拖放功能(两种)
Feb 13 #Javascript
bootstrap table 数据表格行内修改的实现代码
Feb 13 #Javascript
判断横屏竖屏(三种)
Feb 13 #Javascript
You might like
PHP制作图型计数器的例子
2006/10/09 PHP
解决PHP mysql_query执行超时(Fatal error: Maximum execution time …)
2013/07/03 PHP
Linux系统递归生成目录中文件的md5的方法
2015/06/29 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
PHP面向对象五大原则之开放-封闭原则(OCP)详解
2018/04/04 PHP
Span元素的width属性无效果原因及解决方案
2010/01/15 Javascript
JS获取url链接字符串 location.href
2013/12/23 Javascript
js中document.write的那点事
2014/12/12 Javascript
JQuery实现防止退格键返回的方法
2015/02/12 Javascript
javascript实现表单提交后,提交按钮不可用的方法
2015/04/18 Javascript
浅谈javascript获取元素transform参数
2015/07/24 Javascript
Vue.js第三天学习笔记(计算属性computed)
2016/12/01 Javascript
Bootstrap3下拉菜单的实现
2017/02/22 Javascript
vue-cli的webpack模板项目配置文件分析
2017/04/01 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
2017/07/11 Javascript
bootstrap confirmation按钮提示组件使用详解
2017/08/22 Javascript
bootstrap table支持高度百分比的实例代码
2018/02/28 Javascript
JavaScript实现的反序列化json字符串操作示例
2018/07/18 Javascript
jQuery实现的简单歌词滚动功能示例
2019/01/07 jQuery
Node.js 路由的实现方法
2019/06/05 Javascript
typescript nodejs 依赖注入实现方法代码详解
2019/07/21 NodeJs
JavaScript中条件语句的优化技巧总结
2020/12/04 Javascript
[49:11]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.20
2020/12/23 DOTA
python中threading超线程用法实例分析
2015/05/16 Python
python中使用正则表达式的连接符示例代码
2017/10/10 Python
在python中利用dict转json按输入顺序输出内容方式
2020/02/27 Python
python3 正则表达式基础廖雪峰
2020/03/25 Python
你正在寻找的CSS3 动画技术
2011/07/27 HTML / CSS
css3 自定义字体font-face使用介绍
2014/05/14 HTML / CSS
html5页面结构_动力节点Java学院整理
2017/07/10 HTML / CSS
挖掘机司机岗位职责
2014/02/12 职场文书
体育教师个人的自我评价
2014/02/16 职场文书
2015年乡镇科普工作总结
2015/05/13 职场文书
聘任书格式及范文
2015/09/21 职场文书
2016中秋节广告语
2016/01/28 职场文书
2016年教师党员承诺书范文
2016/03/24 职场文书