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 相关文章推荐
JQuery中使用.each()遍历元素学习笔记
Nov 08 Javascript
JavaScript设置body高度为浏览器高度的方法
Feb 09 Javascript
JQuery boxy插件在IE中边角图片不显示问题的解决
May 20 Javascript
js实现表单多按钮提交action的处理方法
Oct 24 Javascript
js获取及判断键盘按键的方法
Dec 01 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
Jan 23 Javascript
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
Feb 28 Javascript
JS实现队列与堆栈的方法
Apr 21 Javascript
Bootstrap 模态框实例插件案例分析
Dec 28 Javascript
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
Aug 21 Javascript
微信小程序实现跑马灯效果
Oct 21 Javascript
微信运维交互机器人的示例代码
Nov 12 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和js如何通过json互相传递数据相关问题探讨
2013/02/26 PHP
php缩小png图片不损失透明色的解决方法
2013/12/25 PHP
PHP 绘制网站登录首页图片验证码
2016/04/12 PHP
浅谈PHP SHA1withRSA加密生成签名及验签
2019/03/18 PHP
iframe 异步加载技术及性能分析
2011/07/19 Javascript
原生Js页面滚动延迟加载图片实现原理及过程
2013/06/24 Javascript
js中的cookie的读写操作示例详解
2014/04/17 Javascript
基于Css3和JQuery实现打字机效果
2015/08/11 Javascript
详解WordPress开发中get_current_screen()函数的使用
2016/01/11 Javascript
第三章之Bootstrap 表格与按钮功能
2016/04/25 Javascript
AngularJs $parse、$eval和$observe、$watch详解
2016/09/21 Javascript
javascript中闭包概念与用法深入理解
2016/12/15 Javascript
JQuery异步提交表单与文件上传功能示例
2017/01/12 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
2018/10/08 Javascript
ES6 fetch函数与后台交互实现
2018/11/14 Javascript
小程序点击图片实现自动播放视频
2020/05/29 Javascript
图文详解vue框架安装步骤
2019/02/12 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
2019/04/23 Javascript
聊聊Vue 中 title 的动态修改问题
2019/06/11 Javascript
vue路由拦截器和请求拦截器知识点总结
2019/11/08 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
2020/08/14 Javascript
详解React路由传参方法汇总记录
2020/11/29 Javascript
[01:02:46]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python bmp转换为jpg 并删除原图的方法
2018/10/25 Python
Python3.5装饰器原理及应用实例详解
2019/04/30 Python
python 解决函数返回return的问题
2020/12/05 Python
雅高酒店中国:Accorhotels.com China
2018/03/26 全球购物
聚网科技C++面试笔试题
2015/09/01 面试题
学校门卫管理制度
2014/01/30 职场文书
护理专业自我鉴定
2014/01/30 职场文书
重阳节活动总结
2014/08/27 职场文书
销售简历自我评价怎么写
2014/09/26 职场文书
领导走群众路线整改措施思想汇报
2014/10/12 职场文书
长城导游词300字
2015/01/30 职场文书
2015年酒店客房部工作总结
2015/04/25 职场文书
OpenCV中resize函数插值算法的实现过程(五种)
2021/06/05 Python