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定时机制
Oct 29 Javascript
返回对象在当前级别中是第几个元素的实现代码
Jan 20 Javascript
js和jquery对dom节点的操作(创建/追加)
Apr 21 Javascript
非常好用的JsonToString 方法 简单实例
Jul 18 Javascript
JavaScript模块化开发之SeaJS
Dec 13 Javascript
原生javascript实现addClass,removeClass,hasClass函数
Feb 25 Javascript
Vue的Class与Style绑定的方法
Sep 01 Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
Oct 09 Javascript
基于vue.js快速搭建图书管理平台
Oct 29 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
Sep 13 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
Dec 16 Javascript
js实现简单五子棋游戏
May 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载入图像imagecreatefrom_gif_jpeg_png系列函数用法分析
2016/11/14 PHP
PHP基于PDO实现的SQLite操作类【包含增删改查及事务等操作】
2017/06/21 PHP
万能的php分页类
2017/07/06 PHP
JavaScript高级程序设计 DOM学习笔记
2011/09/10 Javascript
javascript实现焦点滚动图效果 具体方法
2013/06/24 Javascript
一个仿糯米弹框效果demo
2014/07/22 Javascript
在AngularJS中使用AJAX的方法
2015/06/17 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
2015/08/24 Javascript
jQuery+CSS3折叠卡片式下拉列表框实现效果
2015/11/02 Javascript
javascript跑马灯抽奖实例讲解
2020/04/17 Javascript
第二篇Bootstrap起步
2016/06/21 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
2016/11/01 Javascript
bootstrap multiselect下拉列表功能
2017/08/22 Javascript
认识jQuery的Promise的具体使用方法
2017/10/10 jQuery
使用vue-cli+webpack搭建vue开发环境的方法
2017/12/22 Javascript
vue-cli 组件的导入与使用教程详解
2018/04/11 Javascript
Python实现求笛卡尔乘积的方法
2017/09/16 Python
使用Python在Windows下获取USB PID&amp;VID的方法
2019/07/02 Python
python关闭占用端口方式
2019/12/17 Python
Python3中的f-Strings增强版字符串格式化方法
2020/03/04 Python
使用python matplotlib 画图导入到word中如何保证分辨率
2020/04/16 Python
解决echarts中饼图标签重叠的问题
2020/05/16 Python
python缩进长度是否统一
2020/08/02 Python
python 6行代码制作月历生成器
2020/09/18 Python
PyCharm2020.3.2安装超详细教程
2021/02/08 Python
CSS3中动画属性transform、transition和animation属性的区别
2016/09/25 HTML / CSS
德国电子商城:ComputerUniverse
2017/04/21 全球购物
SneakerStudio英国:最佳运动鞋商店
2019/05/22 全球购物
学校三节实施方案
2014/06/09 职场文书
践行党的群众路线心得体会
2014/11/05 职场文书
无保留意见审计报告
2015/06/05 职场文书
关于感恩老师的古诗句
2019/08/20 职场文书
创作书写之导游词实用技巧分享(干货)
2019/12/20 职场文书
超级详细实用的pycharm常用快捷键
2021/05/12 Python
python简单验证码识别的实现过程
2021/06/20 Python
服务器nginx权限被拒绝解决案例
2022/09/23 Servers