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 相关文章推荐
FCK调用方法..
Dec 21 Javascript
用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。
Aug 15 Javascript
JavaScript 存在陷阱 删除某一区域所有节点
May 10 Javascript
Array.prototype.concat不是通用方法反驳[译]
Sep 20 Javascript
js猜数字小游戏的简单实现代码
Jul 02 Javascript
Jquery实现瀑布流布局(备有详细注释)
Jul 31 Javascript
JQuery+EasyUI轻松实现步骤条效果
Feb 22 Javascript
Bootstrap3多级下拉菜单
Feb 24 Javascript
bootstrap datepicker插件默认英文修改为中文
Jul 28 Javascript
elementUI Tree 树形控件的官方使用文档
Apr 25 Javascript
Vue使用虚拟dom进行渲染view的方法
Dec 26 Javascript
Vue数字输入框组件示例代码详解
Jan 15 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面向对象学习笔记之一 基础概念
2012/10/06 PHP
探讨:php中在foreach中使用foreach ($arr as &amp;$value) 这种类型的解释
2013/06/24 PHP
学习php设计模式 php实现访问者模式(Visitor)
2015/12/07 PHP
php+redis实现商城秒杀功能
2020/11/19 PHP
Web 前端设计模式--Dom重构 提高显示性能
2010/10/22 Javascript
基于jQuery的图片大小自动适应实现代码
2010/11/17 Javascript
jQuery setTimeout()函数使用方法
2013/04/07 Javascript
js实现的折叠导航示例
2013/11/29 Javascript
js动态创建上传表单通过iframe模拟Ajax实现无刷新
2014/02/20 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
2014/06/12 Javascript
jquery实现可拖拽弹出层特效
2015/01/04 Javascript
JavaScript实现列表分页功能特效
2015/05/15 Javascript
JavaScript中的call方法和apply方法使用对比
2015/08/12 Javascript
Javascript中的arguments对象
2016/06/20 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
2016/10/01 Javascript
原生js实现可爱糖果数字时间特效
2016/12/30 Javascript
关于iframe跨域POST提交的方法示例
2017/01/15 Javascript
JavaScript获取当前时间向前推三个月的方法示例
2017/02/04 Javascript
js实现图片加载淡入淡出效果
2017/04/07 Javascript
vue.js项目nginx部署教程
2018/04/05 Javascript
微信小程序下拉框搜索功能的实现方法
2019/07/31 Javascript
Vue切换组件实现返回后不重置数据,保留历史设置操作
2020/07/21 Javascript
[08:02]DOTA2牵红线 zhou神抱得美人归
2014/03/22 DOTA
详解Django通用视图中的函数包装
2015/07/21 Python
Python win32com 操作Exce的l简单方法(必看)
2017/05/25 Python
Python编程实现二叉树及七种遍历方法详解
2017/06/02 Python
Python使用pydub库对mp3与wav格式进行互转的方法
2019/01/10 Python
python实现3D地图可视化
2020/03/25 Python
scrapy结合selenium解析动态页面的实现
2020/09/28 Python
美国猫狗药物和用品网站:PetCareRx
2017/01/05 全球购物
应聘自荐书
2013/10/08 职场文书
高中军训感言400字
2014/02/24 职场文书
给上级领导的感谢信
2015/01/22 职场文书
结婚保证书(三从四德)
2015/02/26 职场文书
2015年教师个人业务工作总结
2015/10/23 职场文书
Nginx开启Brotli压缩算法实现过程详解
2021/03/31 Servers