javascript省市区三级联动下拉框菜单实例演示


Posted in Javascript onNovember 29, 2015

本文实例讲述了javascript实现省市区三级联动下拉框菜单代码,像平时购物选择地址时一样,通过选择的省动态加载城市列表,通过选择的城市动态加载县区列表,从而可以实现省市县的三级联动,下面使用原生的JavaScript来实现这个功能,分享给大家供大家参考。具体如下:
运行效果截图如下:

javascript省市区三级联动下拉框菜单实例演示

具体代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>三级联动测试</title>
 <script src="jquery-2.1.4.min.js"></script>
 <script type="text/javascript">
  //用来获得option元素中selected属性为true的元素的id
  function Get_Selected_Id(place){
   var pro = document.getElementById(place);
   var Selected_Id = pro.options[pro.selectedIndex].id;
   return Selected_Id;   //返回selected属性为true的元素的id
  }
  //改变下一个级联的option元素的内容,即加载市或县
  function Get_Next_Place(This_Place_ID,Action){
   var Selected_Id = Get_Selected_Id(This_Place_ID); //Selected_Id用来记录当前被选中的省或市的ID
   if(Action=='Get_city')       //从而可以在下一个级联中加载相应的市或县
    Add_city(Selected_Id);
   else if(Action=='Get_country')
    Add_country(Selected_Id);
  }
  //用来存储省市区的数据结构
  var Place_dict = {
   "GuangDong":{
       "GuangZhou":["PanYu","HuangPu","TianHe"],
       "QingYuan":["QingCheng","YingDe","LianShan"],
       "FoShan":["NanHai","ShunDe","SanShui"]
       },
   "ShanDong":{
       "JiNan":["LiXia","ShiZhong","TianQiao"],
       "QingDao":["ShiNan","HuangDao","JiaoZhou"]
       },
   "HuNan":{
       "ChangSha":["KaiFu","YuHua","WangCheng"],
       "ChenZhou":["BeiHu","SuXian","YongXian"]
      }
  };
  //加载城市选项
  function Add_city(Province_Selected_Id){
   $("#city").empty();
   $("#city").append("<option>City</option>");
   $("#country").empty();
   $("#country").append("<option>Country</option>");
   //上面的两次清空与两次添加是为了保持级联的一致性
   var province_dict = Place_dict[Province_Selected_Id]; //获得一个省的字典
   for(city in province_dict){  //取得省的字典中的城市
    //添加内容的同时在option标签中添加对应的城市ID
    var text = "<option"+" id='"+city+"'>"+city+"</option>";
    $("#city").append(text);
    console.log(text); //用来观察生成的text数据
   }
  }
  //加载县区选项
  function Add_country(City_Selected_Id){
   $("#country").empty();
   $("#country").append("<option>Country</option>");
   //上面的清空与添加是为了保持级联的一致性
   var Province_Selected_ID = Get_Selected_Id("province");  //获得被选中省的ID,从而方便在字典中加载数据
   var country_list = Place_dict[Province_Selected_ID][City_Selected_Id]; //获得城市列表
   for(index in country_list){
    ////添加内容的同时在option标签中添加对应的县区ID
    var text = "<option"+" id=\'"+country_list[index]+"\'>"+country_list[index]+"</option>";
    $("#country").append(text);
    console.log(text); //用来观察生成的text数据
   }
  }
 
 </script>
</head>
<body>
 <p>您的收货地址:</p>
 <select id="province" onchange="Get_Next_Place('province','Get_city')">
  <option id="Not_data1">Province</option>
  <option id="GuangDong" value="GuangDong">GuangDong</option>
  <option id="ShanDong" value="ShanDong">ShanDong</option>
  <option id="HuNan" value="HuNan">HuNan</option>
 </select>
 <select id="city" onchange="Get_Next_Place('city','Get_country')">
  <option id="Not_data2">City</option>
 </select>
 <select id="country">
  <option id="Not_data3">Country</option>
 </select>
 <br/>
</body>
</html>

如果大家还想深入学习,可以点击jquery下拉框效果汇总、JavaScript下拉框效果汇总进行学习。

这个实例就是类似在淘宝购物时填写收货地址,实现省市县的三级联动,希望大家可以应用到自己的作品中,学以致用。

Javascript 相关文章推荐
jQuery学习笔记之Helloworld
Dec 22 Javascript
jQuery中offsetParent()方法用法实例
Jan 19 Javascript
浅谈javascript中自定义模版
Jan 29 Javascript
JavaScript操作select元素和option的实例代码
Jan 29 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
Jun 24 Javascript
微信小程序 toast 详解及实例代码
Nov 09 Javascript
前端构建工具之gulp的语法教程
Jun 12 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
Oct 20 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
Dec 18 Javascript
vue实现倒计时获取验证码效果
Apr 17 Javascript
使用next.js开发网址缩短服务的方法
Jun 17 Javascript
用Javascript实现发送短信验证码间隔功能
Feb 08 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
Nov 29 #Javascript
实例解析jQuery插件EasyUI最常用的表单验证规则
Nov 29 #Javascript
整理Javascript流程控制语句学习笔记
Nov 29 #Javascript
基于javascript代码实现通过点击图片显示原图片
Nov 29 #Javascript
整理Javascript数组学习笔记
Nov 29 #Javascript
Bootstrap每天必学之缩略图与警示窗
Nov 29 #Javascript
分享我的jquery实现下拉菜单心的
Nov 29 #Javascript
You might like
ThinkPHP开发--使用七牛云储存
2017/09/14 PHP
关于laravel 子查询 &amp; join的使用
2019/10/16 PHP
一些技巧性实用js代码小结
2009/10/14 Javascript
通过Javascript创建一个选择文件的对话框代码
2012/06/16 Javascript
javascript学习笔记(十七) 检测浏览器插件代码
2012/06/20 Javascript
JS定时器实例详细分析
2013/10/11 Javascript
Javascript快速排序算法详解
2014/12/03 Javascript
jQuery插件jRumble实现网页元素抖动
2015/06/05 Javascript
JavaScript中的getDay()方法使用详解
2015/06/09 Javascript
jquery实现删除一个元素后面的所有元素功能
2015/12/21 Javascript
探讨:JavaScript ECAMScript5 新特性之get/set访问器
2016/05/05 Javascript
常用的js验证和数据处理总结
2016/08/02 Javascript
教你JS中的运算符乘方、开方及变量格式转换
2016/08/09 Javascript
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
2016/11/04 Javascript
关于定制FileField中的上传文件名称问题
2017/08/22 Javascript
简化vuex的状态管理方案的方法
2018/06/02 Javascript
详解微信小程序开发用户授权登陆
2019/04/24 Javascript
vue如何获取自定义元素属性参数值的方法
2019/05/14 Javascript
vue实现lodop打印功能的示例
2020/11/11 Javascript
Python中条件选择和循环语句使用方法介绍
2013/03/13 Python
python实现文本去重且不打乱原本顺序
2016/01/26 Python
巧用python和libnmapd,提取Nmap扫描结果
2016/08/23 Python
PyTorch中topk函数的用法详解
2020/01/02 Python
Python try except异常捕获机制原理解析
2020/04/18 Python
Django通过设置CORS解决跨域问题
2020/11/26 Python
python爬虫爬取图片的简单代码
2021/01/18 Python
Gtech官方网站:地毯清洁器、吸尘器及园艺设备
2018/05/23 全球购物
Fox Racing英国官网:越野摩托车和山地自行车服装
2020/02/26 全球购物
竞争性谈判邀请书
2014/02/06 职场文书
会计助理岗位职责
2014/02/17 职场文书
2015公务员年度考核评语
2015/03/25 职场文书
2016年情人节问候语
2015/11/11 职场文书
我的中国梦心得体会范文
2016/01/05 职场文书
七年级作文之冬景
2019/11/07 职场文书
elasticSearch-api的具体操作步骤讲解
2021/06/28 Java/Android
Vertica集成Apache Hudi重磅使用指南
2022/03/31 Servers