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 禁止复制网页
Jun 11 Javascript
IE中jquery.form中ajax提交没反应解决方法分享
Sep 11 Javascript
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
Jul 09 Javascript
用unescape反编码得出汉字示例
Apr 24 Javascript
Immutable 在 JavaScript 中的应用
May 02 Javascript
JavaScript中原型链存在的问题解析
Sep 25 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
Dec 08 Javascript
vue实现列表的添加点击
Dec 29 Javascript
javascript html5轻松实现拖动功能
Mar 01 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
Aug 16 Javascript
vue实现购物车的监听
Apr 20 Javascript
vue.js实现点击图标放大离开时缩小的代码
Jan 27 Vue.js
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
其他功能
2006/10/09 PHP
解决php中Cannot send session cache limiter 的问题的方法
2007/04/27 PHP
phpMyadmin 用户权限中英对照
2010/04/02 PHP
LotusPhp笔记之:基于ObjectUtil组件的使用分析
2013/05/06 PHP
基于php设计模式中单例模式的应用分析
2013/05/15 PHP
使用pthreads实现真正的PHP多线程(需PHP5.3以上版本)
2014/05/05 PHP
PHP中set error handler函数用法小结
2015/11/11 PHP
Yii2数据库操作常用方法小结
2017/05/04 PHP
PHP实现链式操作的三种方法详解
2017/11/16 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
php微信公众号开发之翻页查询
2018/10/20 PHP
PHP使用SOAP调用API操作示例
2018/12/25 PHP
面向对象的Javascript之一(初识Javascript)
2012/01/20 Javascript
11个用于提高排版水平的基于jquery的文字效果插件
2012/09/14 Javascript
js导出table到excel同时兼容FF和IE示例
2013/09/03 Javascript
JavaScript中函数(Function)的apply与call理解
2015/07/08 Javascript
JS原型、原型链深入理解
2016/02/27 Javascript
js 实现数值的千分位及保存小数方法(推荐)
2016/08/01 Javascript
Angular利用trackBy提升性能的方法
2018/01/26 Javascript
小程序表单认证布局及验证详解
2020/06/19 Javascript
python实现读Excel写入.txt的方法
2018/04/29 Python
python发送邮件脚本
2018/05/22 Python
python实现简单加密解密机制
2019/03/19 Python
Python实现操纵控制windows注册表的方法分析
2019/05/24 Python
利用selenium爬虫抓取数据的基础教程
2019/06/10 Python
python3连接kafka模块pykafka生产者简单封装代码
2019/12/23 Python
Python:type、object、class与内置类型实例
2019/12/25 Python
TensorFlow命名空间和TensorBoard图节点实例
2020/01/23 Python
python中_del_还原数据的方法
2020/12/09 Python
金鑫耀Java笔试题
2014/09/06 面试题
自我评价的正确写法
2013/09/19 职场文书
2014大学生批评与自我批评思想汇报
2014/09/21 职场文书
交通事故被告代理词
2015/05/23 职场文书
2015秋季小学开学寄语
2015/05/27 职场文书
Python 的 sum() Pythonic 的求和方法详细
2021/10/16 Python
Spring Data JPA框架自定义Repository接口
2022/04/28 Java/Android