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 相关文章推荐
jQuery 删除或是清空某个HTML元素示例
Aug 04 Javascript
Javascript window对象详解
Nov 12 Javascript
jquery插件jSignature实现手动签名
May 04 Javascript
js中substring和substr两者区别和使用方法
Nov 09 Javascript
使用jquery.form.js实现图片上传的方法
May 05 Javascript
Vuex模块化实现待办事项的状态管理
Mar 15 Javascript
Angularjs Promise实例详解
Mar 15 Javascript
vue两个组件间值的传递或修改方式
Jul 04 Javascript
JavaScript 高性能数组去重的方法
Sep 20 Javascript
微信小程序自定义弹窗实现详解(可通用)
Jul 04 Javascript
探究一道价值25k的蚂蚁金服异步串行面试题
Aug 21 Javascript
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
May 30 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
解决了Ajax、MySQL 和 Zend Framework 的乱码问题
2009/03/03 PHP
PHP编码转换函数 自动转换字符集支持数组转换
2012/12/16 PHP
PHP 抽象方法与抽象类abstract关键字介绍及应用
2014/10/16 PHP
php中smarty变量修饰用法实例分析
2015/06/11 PHP
PHP中使用foreach()遍历二维数组的简单实例
2016/06/13 PHP
Javascript Object.extend
2010/05/18 Javascript
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
2011/06/27 Javascript
jquery 获取 outerHtml 包含当前节点本身的代码
2014/10/30 Javascript
jquery分隔Url的param方法(推荐)
2016/05/25 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
2017/01/10 Javascript
JS实现的自动打字效果示例
2017/03/10 Javascript
JavaScript实现图片无缝滚动效果
2017/07/07 Javascript
node.js学习之事件模块Events的使用示例
2017/09/28 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
2018/09/14 Javascript
vue中的mvvm模式讲解
2019/01/31 Javascript
vue如何获取自定义元素属性参数值的方法
2019/05/14 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
2019/09/18 Javascript
JavaScript实时更新当前的时间的示例代码
2020/07/15 Javascript
Django框架中间件(Middleware)用法实例分析
2019/05/24 Python
增大python字体的方法步骤
2020/07/05 Python
Python3爬虫里关于识别微博宫格验证码的知识点详解
2020/07/30 Python
Omio英国:搜索并比较便宜的巴士、火车和飞机
2019/08/27 全球购物
Linux中如何用命令创建目录
2015/01/12 面试题
护士专业推荐信
2013/11/02 职场文书
大学生最新职业生涯规划书范文
2014/01/12 职场文书
食品厂厂长岗位职责
2014/01/30 职场文书
会计专业毕业自荐书范文
2014/02/08 职场文书
2014学习十八届四中全会精神思想汇报范文
2014/10/23 职场文书
走群众路线学习笔记
2014/11/06 职场文书
建国大业观后感800字
2015/06/01 职场文书
汶川大地震感悟
2015/08/10 职场文书
合同补充协议书
2016/03/24 职场文书
小学生六年级作文之关于感恩
2019/08/16 职场文书
一文读懂go中semaphore(信号量)源码
2021/04/03 Golang
mysql 8.0.24版本安装配置方法图文教程
2021/05/12 MySQL
python中redis包操作数据库的教程
2022/04/19 Python