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 相关文章推荐
js实现DIV的一些简单控制
Jun 04 Javascript
在标题栏显示新消息提示,很多公司项目中用到这个方法
Nov 04 Javascript
Ext JS 4官方文档之三 -- 类体系概述与实践
Dec 16 Javascript
js限制文本框输入长度两种限制方式(长度、字节数)
Dec 19 Javascript
javascript替换已有元素replaceChild()使用介绍
Apr 03 Javascript
jQuery中click事件的定义和用法
Dec 20 Javascript
JavaScript为事件句柄绑定监听函数实例详解
Dec 15 Javascript
jQuery对html元素的取值与赋值实例详解
Dec 18 Javascript
基于JQuery的Ajax方法使用详解
Aug 16 jQuery
推荐10款扩展Web表单的JS插件
Dec 25 Javascript
JavaScript 有用的代码片段和 trick
Feb 22 Javascript
vue实现双向绑定和依赖收集遇到的坑
Nov 29 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
WordPress中用于获取文章信息以及分类链接的函数用法
2015/12/18 PHP
jQuery EasyUI API 中文文档 - Menu菜单
2011/10/03 Javascript
使用Jquery来实现可以输入值的下拉选单 雏型
2011/12/06 Javascript
JavaScript实现自己的DOM选择器原理及代码
2013/03/04 Javascript
jQuery 获取、设置HTML或TEXT内容的两种方法
2014/05/23 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
2015/09/23 Javascript
jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
2016/05/27 Javascript
在javascript中使用com组件的简单实现方法
2016/08/17 Javascript
针对JavaScript中this指向的简单理解
2016/08/26 Javascript
详解javascript获取url信息的常见方法
2016/12/19 Javascript
JS实现DIV高度自适应窗口示例
2017/02/16 Javascript
angular写一个列表的选择全选交互组件的示例
2018/01/22 Javascript
从零开始搭建一个react项目开发
2018/02/09 Javascript
JS动画定时器知识总结
2018/03/23 Javascript
GOJS+VUE实现流程图效果
2018/12/01 Javascript
基于JS实现一个随机生成验证码功能
2019/05/29 Javascript
jQuery实现飞机大战小游戏
2020/07/05 jQuery
jQuery实现朋友圈查看图片
2020/09/11 jQuery
[01:08]DOTA2“血战之命”预告片
2017/08/12 DOTA
Python中利用sorted()函数排序的简单教程
2015/04/27 Python
requests和lxml实现爬虫的方法
2017/06/11 Python
纯用NumPy实现神经网络的示例代码
2018/10/24 Python
Python 解码Base64 得到码流格式文本实例
2020/01/09 Python
Python matplotlib画曲线例题解析
2020/02/07 Python
Python网络爬虫信息提取mooc代码实例
2020/03/06 Python
春秋航空官方网站:Spring Airlines
2017/09/27 全球购物
Probikekit欧盟:在线公路自行车专家
2019/07/12 全球购物
西班牙最好的在线购买葡萄酒的商店:Vinoseleccion
2019/10/30 全球购物
java程序员面试交流
2012/11/29 面试题
实习评语大全
2014/04/26 职场文书
教导主任竞聘演讲稿
2014/05/16 职场文书
2014年终工作总结范本
2014/12/15 职场文书
蜗居观后感
2015/06/11 职场文书
2019年感恩励志演讲稿(收藏备用)
2019/09/11 职场文书
win11如何查看端口是否被占用? Win11查看端口是否占用的技巧
2022/04/05 数码科技
Grafana可视化监控系统结合SpringBoot使用
2022/04/19 Redis