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小问题说明
Sep 26 Javascript
javascript学习笔记(二) js一些基本概念
Jun 18 Javascript
解决IE6的PNG透明JS插件使用介绍
Apr 17 Javascript
jQuery统计上传文件大小的方法
Jan 24 Javascript
使用angularjs创建简单表格
Jan 21 Javascript
在JavaScript中模拟类(class)及类的继承关系
May 20 Javascript
js获取上传文件的绝对路径实现方法
Aug 02 Javascript
Node.js操作redis实现添加查询功能
May 25 Javascript
JavaScript实现快速排序的方法分析
Jan 10 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
Feb 06 Javascript
jQuery实现表格的增、删、改操作示例
Jan 27 jQuery
ant design charts 获取后端接口数据展示
May 25 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实现单链表的实例代码
2013/03/22 PHP
php不用正则验证真假身份证
2013/11/06 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
如何修改yii2.0自带的user表为其它的表
2017/08/01 PHP
php实现登录页面的简单实例
2019/09/29 PHP
一个很酷的拖动层的js类,兼容IE及Firefox
2009/06/23 Javascript
jquery 学习笔记一
2010/04/07 Javascript
JavaScript对象链式操作代码(jquery)
2010/07/04 Javascript
javaScript如何生成xmlhttp
2013/12/16 Javascript
jQuery给动态添加的元素绑定事件的方法
2015/03/09 Javascript
基于JavaScript怎么实现让歌词滚动播放
2015/11/03 Javascript
JavaScript File分段上传
2016/03/10 Javascript
微信小程序中单位rpx和rem的使用
2016/12/06 Javascript
深入浅析var,let,const的异同点
2018/08/07 Javascript
详解webpack-dev-server使用方法
2018/09/14 Javascript
基于node+vue实现简单的WebSocket聊天功能
2020/02/01 Javascript
VUE中使用HTTP库Axios方法详解
2020/02/05 Javascript
[52:57]2014 DOTA2国际邀请赛中国区预选赛 LGD-CDEC VS HGT
2014/05/21 DOTA
[54:28]EG vs OG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python基于Tkinter库实现简单文本编辑器实例
2015/05/05 Python
用Python一键搭建Http服务器的方法
2018/06/01 Python
Pycharm代码无法复制,无法选中删除,无法编辑的解决方法
2018/10/22 Python
Python利用pandas处理Excel数据的应用详解
2019/06/18 Python
利用keras加载训练好的.H5文件,并实现预测图片
2020/01/24 Python
python matplotlib.pyplot.plot()参数用法
2020/04/14 Python
python工具快速为音视频自动生成字幕(使用说明)
2021/01/27 Python
用HTML5制作一个简单的桌球游戏的教程
2015/05/12 HTML / CSS
惠普墨西哥官方商店:HP墨西哥
2016/12/01 全球购物
印尼第一大家居、生活和家具电子商务:Ruparupa
2019/11/25 全球购物
婚前协议书怎么写
2014/04/15 职场文书
员工安全生产承诺书
2014/05/22 职场文书
工作证明范本(2篇)
2014/09/14 职场文书
死亡证明书样本说明
2014/10/18 职场文书
评奖评优个人先进事迹材料
2015/11/04 职场文书
Python 详解通过Scrapy框架实现爬取CSDN全站热榜标题热词流程
2021/11/11 Python
Java使用JMeter进行高并发测试
2021/11/23 Java/Android