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 相关文章推荐
Node.js开发指南中的简单实例(mysql版)
Sep 17 Javascript
JS数组(Array)处理函数整理
Dec 07 Javascript
jQuery选择器源码解读(三):tokenize方法
Mar 31 Javascript
JavaScript 里的类数组对象
Apr 08 Javascript
JQuery分屏指示器图片轮换效果实例
May 21 Javascript
AngularJS基础 ng-keydown 指令简单示例
Aug 02 Javascript
基于ajax与msmq技术的消息推送功能实现代码
Dec 26 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
Jan 06 Javascript
Node.js与Sails redis组件的使用教程
Feb 14 Javascript
利用vue + element实现表格分页和前端搜索的方法
Dec 25 Javascript
用node-webkit把web应用打包成桌面应用(windows环境)
Feb 01 Javascript
Vue中使用vee-validate表单验证的方法
May 09 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
微信公众号支付之坑:调用支付jsapi缺少参数 timeStamp等错误解决方法
2016/01/12 PHP
解析WordPress中控制用户登陆和判断用户登陆的PHP函数
2016/03/01 PHP
CI框架的安全性分析
2016/05/18 PHP
PHP编程计算两个时间段是否有交集的实现方法(不算边界重叠)
2017/05/30 PHP
PHP ajax+jQuery 实现批量删除功能实例代码小结
2018/12/06 PHP
JS 创建对象(常见的几种方法)
2008/11/03 Javascript
高亮显示web页表格行的javascript代码
2010/11/19 Javascript
jQuery中position()方法用法实例
2015/01/16 Javascript
JavaScript forEach()遍历函数使用及介绍
2015/07/08 Javascript
JS跨域交互(jQuery+php)之jsonp使用心得
2016/07/01 Javascript
jQuery实现获取元素索引值index的方法
2016/09/18 Javascript
html判断当前页面是否在iframe中的实例
2016/11/30 Javascript
微信小程序 选项卡的简单实例
2017/05/24 Javascript
Angular学习笔记之集成三方UI框架、控件的示例
2018/03/23 Javascript
JavaScript 自定义html元素鼠标右键菜单功能
2019/12/02 Javascript
基于elementUI竖向表格、和并列的案例
2020/10/26 Javascript
[51:43]OG vs LGD 2018国际邀请赛淘汰赛BO3 第五场 8.26
2018/08/30 DOTA
Python使用代理抓取网站图片(多线程)
2014/03/14 Python
python实现linux下使用xcopy的方法
2015/06/28 Python
Python 爬虫模拟登陆知乎
2016/09/23 Python
pandas使用get_dummies进行one-hot编码的方法
2018/07/10 Python
Python之两种模式的生产者消费者模型详解
2018/10/26 Python
python 求1-100之间的奇数或者偶数之和的实例
2019/06/11 Python
python调用自定义函数的实例操作
2019/06/26 Python
解决Django加载静态资源失败的问题
2019/07/28 Python
Python动态声明变量赋值代码实例
2019/12/30 Python
使用Pyhton 分析酒店针孔摄像头
2020/03/04 Python
Python 可视化神器Plotly详解
2020/12/26 Python
PyCharm 光标变成黑块的解决方式
2021/02/06 Python
BLACKMORES澳洲官网:澳大利亚排名第一的保健品牌
2018/09/27 全球购物
中专生自荐信
2013/10/12 职场文书
党旗在我心中演讲稿
2014/09/15 职场文书
“四风”问题自我剖析材料思想汇报
2014/09/23 职场文书
推广普通话的宣传语
2015/07/13 职场文书
在js中修改html body的样式
2021/11/11 Javascript
使用compose函数优化代码提高可读性及扩展性
2022/06/16 Javascript