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 相关文章推荐
用window.location.href实现刷新另个框架页面
Mar 07 Javascript
Save a File Using a File Save Dialog Box
Jun 18 Javascript
不用ajax实现点击文字即可编辑的方法
Dec 16 Javascript
Wordpress ThickBox 添加“查看原图”效果代码
Dec 11 Javascript
JS设置获取cookies的方法
Jan 26 Javascript
JavaScript使用indexOf获得子字符串在字符串中位置的方法
Apr 06 Javascript
Node.js实用代码段之正确拼接Buffer
Mar 17 Javascript
AngularJS基础 ng-if 指令用法
Aug 01 Javascript
JavaScript动态绑定详解
Sep 14 Javascript
vue中eventbus被多次触发以及踩过的坑
Dec 02 Javascript
Vue实现简单计算器案例
Feb 25 Javascript
JS绘图Flot如何实现动态可刷新曲线图
Oct 16 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
PHP通过正则表达式下载图片到本地的实现代码
2011/09/19 PHP
浅谈PHP错误类型及屏蔽方法
2017/05/27 PHP
基于PHP-FPM进程池探秘
2017/10/17 PHP
PHP添加文字水印或图片水印的水印类完整源代码与使用示例
2019/03/18 PHP
php上传图片并给图片打上透明水印的代码
2010/06/07 Javascript
jquery如何改变html标签的样式(两种实现方法)
2013/01/16 Javascript
使用text方法获取Html元素文本信息示例
2014/09/01 Javascript
jQuery结合HTML5制作的爱心树表白动画
2015/02/01 Javascript
javascript获取select值的方法分析
2015/07/02 Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
2016/01/08 Javascript
JavaScript来实现打开链接页面的简单实例
2016/06/02 Javascript
详解Vue中一种简易路由传参办法
2017/09/15 Javascript
Vue 菜单栏点击切换单个class(高亮)的方法
2018/08/22 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
2019/03/13 jQuery
微信小程序wxml列表渲染原理解析
2019/11/27 Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
2020/04/09 Javascript
详解Vue之事件处理
2020/07/10 Javascript
javascript局部自定义鼠标右键菜单
2020/12/08 Javascript
PyTorch上搭建简单神经网络实现回归和分类的示例
2018/04/28 Python
用python 实现在不确定行数情况下多行输入方法
2019/01/28 Python
Python3解释器知识点总结
2019/02/19 Python
python os.path.isfile()因参数问题判断错误的解决
2019/11/29 Python
前端canvas动画如何转成mp4视频的方法
2019/06/17 HTML / CSS
深入解析HTML5的IndexedDB索引数据库
2015/09/14 HTML / CSS
美体小铺瑞典官方网站:The Body Shop瑞典
2018/01/27 全球购物
美国在线购买空气净化器、除湿器、加湿器网站:AllergyBuyersClub
2021/03/16 全球购物
法人授权委托书范本
2014/04/04 职场文书
新兵入伍心得体会
2014/09/04 职场文书
党员干部形式主义个人整改措施
2014/09/17 职场文书
房产授权委托书范本
2014/09/22 职场文书
优秀班主任先进事迹材料
2014/12/16 职场文书
学生党支部工作总结2015
2015/05/26 职场文书
教师工作证明范本
2015/06/12 职场文书
出生证明范本
2015/06/15 职场文书
SSM项目使用拦截器实现登录验证功能
2022/01/22 Java/Android
Nginx性能优化之Gzip压缩设置详解(最大程度提高页面打开速度)
2022/02/12 Servers