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下判断IE与FF的比较简单的方式
Oct 17 Javascript
myFocus slide3D v1.1.0 使用方法与下载
Jan 12 Javascript
一个简单的js树形菜单
Dec 09 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
Nov 21 Javascript
Javascript玩转继承(二)
May 08 Javascript
js中直接声明一个对象的方法
Aug 10 Javascript
新手快速学习JavaScript免费教程资源汇总
Jun 25 Javascript
JSONP原理及简单实现
Jun 08 Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
Sep 21 Javascript
利用Vue.js实现checkbox的全选反选效果
Jan 18 Javascript
解决AngualrJS页面刷新导致异常显示问题
Apr 20 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
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
PHP 源代码压缩小工具
2009/12/22 PHP
php写的简易聊天室代码
2011/06/04 PHP
php和javascript之间变量的传递实现代码
2012/12/19 PHP
Yii中render和renderPartial的区别
2014/09/03 PHP
PHP生成静态HTML页面最简单方法示例
2015/04/09 PHP
PHP也能干大事之PHP中的编码解码详解
2015/04/20 PHP
php设计模式之迭代器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
php获取小程序码的实现代码(B类接口)
2020/06/13 PHP
图片自动缩小的js代码,用以防止图片撑破页面
2007/03/12 Javascript
javascript 表格排序和表头浮动效果(扩展SortTable)
2009/04/07 Javascript
JavaScript 动态创建VML的方法
2009/10/14 Javascript
jquery动态添加删除div 具体实现
2013/07/20 Javascript
js算法中的排序、数组去重详细概述
2013/10/14 Javascript
js菜单点击显示或隐藏效果的简单实例
2014/01/13 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
2016/04/20 Javascript
js 提交form表单和设置form表单请求路径的实现方法
2016/10/25 Javascript
angular之ng-template模板加载
2017/11/09 Javascript
JavaScript实现百度搜索框效果
2020/03/26 Javascript
浅谈在node.js进入文件目录的问题
2018/05/13 Javascript
使用element-ui table expand展开行实现手风琴效果
2019/03/15 Javascript
深入浅出了解Node.js Streams
2019/05/27 Javascript
javascript面向对象程序设计实践常用知识点总结
2019/07/29 Javascript
[03:37]2015国际邀请赛第四日现场精彩集锦
2015/08/08 DOTA
[01:14]TI珍贵瞬间系列(六):冠军
2020/08/30 DOTA
Python 中迭代器与生成器实例详解
2017/03/29 Python
Python协程操作之gevent(yield阻塞,greenlet),协程实现多任务(有规律的交替协作执行)用法详解
2019/10/14 Python
python 在threading中如何处理主进程和子线程的关系
2020/04/25 Python
Django使用Profile扩展User模块方式
2020/05/14 Python
python爬取网易云音乐热歌榜实例代码
2020/08/07 Python
哄娃神器4moms商店:美国婴童用品品牌
2019/03/07 全球购物
英语系本科生求职信范文
2013/12/18 职场文书
报表员工作失误检讨书范文
2014/09/19 职场文书
家庭困难证明
2014/10/12 职场文书
小学老师对学生的评语
2014/12/29 职场文书
基层党建工作简报
2015/07/21 职场文书
2016年寒假政治学习心得体会
2015/10/09 职场文书