javascript实现简单的省市区三级联动


Posted in Javascript onMay 14, 2015

当我们注册一个网站,会看到省市区三级联动,下面简单介绍一下

javascript实现简单的省市区三级联动

<!doctype html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="Generator" content="EditPlus®">
 <meta name="Author" content="">
 <meta name="Keywords" content="">
 <meta name="Description" content="">
 <title>Document</title>
 </head>
 <body>
<select id="province" onChange="ck()" >
    <option>--请选择--</option>
   </select>
   <select id="city"> 
    <option>--请选择--</option>
   </select>
   <select id="san">
    <option>--请选择--</option>
   </select>
 </body>
 <script type="text/javascript">
 //======================================第一种方法:获取省市二级联菜单=============================
 //获取省的id
 var prame= document.getElementById("province");
 var city= document.getElementById("city");
var san= document.getElementById("san");
 //创建省市数组
 var cityList=new Array();
   //创建另一个数组
  var zushu=new Array;
   cityList['江西省'] = ['南昌市','抚州市','上饶市','鹰潭市','丰城市','吉安市'];
   cityList['河南省'] = ['郑州市','洛阳市'];
   cityList['湖北省'] = ['武汉市','宜昌市'];
   cityList['福建省'] = ['福州市','三明市','佛山市'];
   zushu['南昌市']=['南昌县','青云谱区','莲塘镇'];
   zushu['抚州市']=['临川区','云山镇','唱凯镇'];
   for(var i in cityList){
    prame.add(new Option(i,i),null);
   }
    prame.onchange=function(){
    var prame= document.getElementById("province").value;
    var city= document.getElementById("city");
    
    city.options.length=0;
    for(var k in cityList[prame]){
       city.add(new Option(cityList[prame][k],cityList[prame][k]),null);
  }
 }
 city.onchange=function(){
   var city= document.getElementById("city").value;
    var san= document.getElementById("san");
    
    san.options.length=0;
    for(var k in zushu[city]){
       san.add(new Option(zushu[city][k]),(zushu[city][k]),null);
  }
 }
</script>
 <!--------------------------------第二种方法:三级联动菜单----------------------
 <script type="text/javascript">
 
        //获取省的id
     var province=document.getElementById("province");
       province.add(new Option("江西省","江西省"),null);
       province.add(new Option("福建省","福建省"),null);
      province.add(new Option("广东省","广东省"),null);
     function ck(){
        
       var city=document.getElementById("city");
        var num=province.selectedIndex;
        city.options.length=0;
  
    switch(num){
      case 1:
       city.add(new Option("南昌市","南昌市"),null);
       city.add(new Option("抚州市","抚州市"),null);
     city.add(new Option("上饶市","上饶市"),null);
       city.add(new Option("吉安市","吉安市"),null);
       break;
       
      case 2:
       city.add(new Option("厦门市","厦门市"),null);
       city.add(new Option("三明市","三明市"),null);
     city.add(new Option("莆田市","莆田市"),null);
       city.add(new Option("龙岩市","龙岩市"),null);
       break;
     
      case 3:
       city.add(new Option("广州市","广州市"),null);
       city.add(new Option("东莞市","东莞市"),null);
     city.add(new Option("保定市","保定市"),null);
       city.add(new Option("珠海市","珠海市"),null);
       break;
        } 
      
      var qu=document.getElementById("qu");
      var num1=province.selectedIndex;
      qu.options.length=0;
      switch(num1){
      case 1:
       qu.add(new Option("临川区","临川区"),null);
       qu.add(new Option("青云谱区","青云谱区"),null);
     qu.add(new Option("南昌镇","南昌镇"),null);
       qu.add(new Option("云山镇","云山镇"),null);
       break;
       
      case 2:
      qu.add(new Option("保安县","保安县"),null);
      qu.add(new Option("福田区","福田区"),null);
     qu.add(new Option("将乐县","将乐县"),null);
      qu.add(new Option("厦门区","厦门区"),null);
       break;
     
     case 3:
      qu.add(new Option("广上县","光上县"),null);
      qu.add(new Option("西莞区","西莞区"),null);
     qu.add(new Option("三海县","三海县"),null);
      qu.add(new Option("广岛区","广岛区"),null);
       break;
        } 
   } 
 </script>-->
</html>

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
Dec 07 Javascript
ASP中Sub和Function的区别说明
Aug 30 Javascript
从js向Action传中文参数出现乱码问题的解决方法
Dec 29 Javascript
js delete 用法(删除对象属性及变量)
Aug 24 Javascript
jquery实现select下拉框美化特效代码分享
Aug 18 Javascript
JS动画实现回调地狱promise的实例代码详解
Nov 08 Javascript
vue-cli配置全局sass、less变量的方法
Jun 06 Javascript
通过js给网页加上水印背景实例
Jun 17 Javascript
微信小程序的授权实现过程解析
Aug 02 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 jQuery
微信小程序实现弹框效果
May 26 Javascript
JavaScript中的几种继承方法示例
Dec 06 Javascript
javascript实现仿腾讯游戏选择
May 14 #Javascript
JavaScript实现Flash炫光波动特效
May 14 #Javascript
javascript基于DOM实现省市级联下拉框的方法
May 14 #Javascript
javascript搜索框效果实现方法
May 14 #Javascript
javascript操作ul中li的方法
May 14 #Javascript
javascript中createElement的两种创建方式
May 14 #Javascript
javascript常用方法总结
May 14 #Javascript
You might like
几道坑人的PHP面试题 试试看看你会不会也中招
2014/08/19 PHP
PHP文件操作之获取目录下文件与计算相对路径的方法
2016/01/08 PHP
php从身份证获取性别和出生年月
2017/02/09 PHP
PHP实现通过CURL上传文件功能示例
2018/05/30 PHP
在Javascript中定义对象类别
2006/12/22 Javascript
JS backgroundImage控制
2009/05/19 Javascript
修改js Calendar日历控件 兼容IE9/谷歌/火狐
2013/01/04 Javascript
JS实现网页Div层Clone拖拽效果
2015/09/26 Javascript
js右下角弹出提示框示例代码
2016/01/12 Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
2016/01/26 Javascript
jQuery弹出下拉列表插件(实现kindeditor的@功能)
2016/08/16 Javascript
手把手教你把nodejs部署到linux上跑出hello world
2017/06/19 NodeJs
Avalonjs双向数据绑定与监听的实例代码
2017/06/23 Javascript
Vue.js 2.5新特性介绍(推荐)
2017/10/24 Javascript
vue2.0.js的多级联动选择器实现方法
2018/02/09 Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
2018/03/07 Javascript
小程序中的箭头函数的具体使用
2020/06/19 Javascript
[04:11]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/01/30 DOTA
[01:08]DOTA2次级职业联赛 - Shield战队宣传片
2014/12/01 DOTA
Python ORM框架SQLAlchemy学习笔记之映射类使用实例和Session会话介绍
2014/06/10 Python
Python随机生成数模块random使用实例
2015/04/13 Python
python变量不能以数字打头详解
2016/07/06 Python
Python使用matplotlib绘制余弦的散点图示例
2018/03/14 Python
通过Pandas读取大文件的实例
2018/06/07 Python
django中间键重定向实例方法
2019/11/10 Python
Python浮点数四舍五入问题的分析与解决方法
2019/11/19 Python
Python tkinter模版代码实例
2020/02/05 Python
Rockport乐步美国官网:风靡美国的白宫鞋
2016/11/24 全球购物
惠而浦美国官网:Whirlpool.com
2021/01/19 全球购物
什么是组件架构
2016/05/15 面试题
教师党员个人剖析材料
2014/09/29 职场文书
表扬稿格式范文
2015/01/16 职场文书
2015年推广普通话演讲稿
2015/03/20 职场文书
2016参观监狱警示教育活动心得体会
2016/01/15 职场文书
《大禹治水》教学反思
2016/02/22 职场文书
在ubuntu下安装go开发环境的全过程
2022/08/05 Golang