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-Mozilla和IE中的一个函数直接量的问题分析
Aug 12 Javascript
jquery 3D球状导航的文章分类
Jul 06 Javascript
JS 控件事件小结
Oct 31 Javascript
javascript实现数组中的内容随机输出
Aug 11 Javascript
JavaScript实现的背景自动变色代码
Oct 17 Javascript
微信小程序使用第三方库Underscore.js步骤详解
Sep 27 Javascript
微信小程序获取用户openId的实现方法
May 23 Javascript
jQuery动画_动力节点节点Java学院整理
Jul 04 jQuery
JavaScript多态与封装实例分析
Jul 27 Javascript
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
Aug 31 Javascript
35个最好用的Vue开源库(史上最全)
Jan 03 Javascript
JS 创建对象的模式实例小结
Apr 28 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/07/16 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
PHP MVC框架中类的自动加载机制实例分析
2019/09/18 PHP
javascript实现上传图片前的预览(TX的面试题)
2007/08/20 Javascript
Javascript笔记一 js以及json基础使用说明
2010/05/22 Javascript
利用div+jquery自定义滚动条样式的2种方法
2013/07/18 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
2013/11/28 Javascript
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
2015/10/30 Javascript
jQuery实现鼠标滑过图片移动特效
2016/12/08 Javascript
Ajax验证用户名或昵称是否已被注册
2017/04/05 Javascript
AngularJS 表单验证手机号的实例(非必填)
2017/11/12 Javascript
通过JavaScript下载文件到本地的方法(单文件)
2019/03/17 Javascript
如何在postman中添加cookie信息步骤解析
2020/06/30 Javascript
详解vue 组件的实现原理
2020/11/12 Javascript
[01:05:12]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS CIS-GAME
2014/05/21 DOTA
[14:20]刀塔大凶女神互压各路奇葩屌丝
2014/05/16 DOTA
Python使用cx_Oracle模块将oracle中数据导出到csv文件的方法
2015/05/16 Python
详解Python之数据序列化(json、pickle、shelve)
2017/03/30 Python
运动检测ViBe算法python实现代码
2018/01/09 Python
浅谈python中np.array的shape( ,)与( ,1)的区别
2018/06/04 Python
Python 字符串与二进制串的相互转换示例
2018/07/23 Python
python去掉 unicode 字符串前面的u方法
2018/10/21 Python
opencv3/C++实现视频背景去除建模(BSM)
2019/12/11 Python
python_matplotlib改变横坐标和纵坐标上的刻度(ticks)方式
2020/05/16 Python
python有几个版本
2020/06/17 Python
HTML5 Canvas入门学习教程
2016/03/17 HTML / CSS
html2canvas生成的图片偏移不完整的解决方法
2020/05/19 HTML / CSS
EntityManager都有哪些方法
2013/11/01 面试题
高中生期末评语
2014/01/28 职场文书
小学少先队活动方案
2014/02/18 职场文书
班级出游活动计划书
2014/08/15 职场文书
单位推荐信范文
2015/03/27 职场文书
2016教师廉洁从教心得体会
2016/01/13 职场文书
2019让人心动的商业计划书
2019/06/27 职场文书
Ajax是什么?Ajax高级用法之Axios技术
2021/04/21 Javascript
MySQL非空约束(not null)案例讲解
2021/08/23 MySQL