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焦点图片切换(数字标注/手动/自动播放/横向滚动)
Jan 24 Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
Oct 23 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
Sep 05 Javascript
微信小程序 rpx 尺寸单位详细介绍
Oct 13 Javascript
使用JavaScript获取URL中的参数(两种方法)
Nov 16 Javascript
浅谈jquery选择器 :first与:first-child的区别
Nov 20 Javascript
元素全屏的设置与监听实例
Nov 28 Javascript
vue在手机中通过本机IP地址访问webApp的方法
Aug 15 Javascript
基于vue、react实现倒计时效果
Aug 26 Javascript
在layui下对元素进行事件绑定的实例
Sep 06 Javascript
详解Vue的sync修饰符
May 15 Vue.js
vue如何在data中引入图片的正确路径
Jun 05 Vue.js
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 xpath()函数讲解
2019/02/11 PHP
js 获取计算后的样式写法及注意事项
2013/02/25 Javascript
jquery 选取方法都有哪些
2014/05/18 Javascript
javascript实现淘宝幻灯片广告展示效果
2015/04/27 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
2015/06/08 Javascript
浅谈JavaScript中null和undefined
2015/07/09 Javascript
jQuery实现获取table表格第一列值的方法
2016/03/01 Javascript
Bootstrap每天必学之折叠(Collapse)插件
2016/04/25 Javascript
js 创建对象 经典模式全面了解
2016/08/16 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
2016/10/09 Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
2016/10/11 Javascript
JavaScript中boolean类型之三种情景实例代码
2016/11/21 Javascript
bootstrap模态框实现拖拽效果
2016/12/14 Javascript
深入理解nodejs中Express的中间件
2017/05/19 NodeJs
让微信小程序支持ES6中Promise特性的方法详解
2017/06/13 Javascript
nodejs中解决异步嵌套循环和循环嵌套异步的问题
2017/07/12 NodeJs
JavaScript运行原理分析
2018/02/09 Javascript
JavaScript中arguments和this对象用法分析
2018/08/08 Javascript
vueJs实现DOM加载完之后自动下拉到底部的实例代码
2018/08/31 Javascript
js实现点击展开隐藏效果(实例代码)
2018/09/28 Javascript
详解利用nodejs对本地json文件进行增删改查
2019/09/20 NodeJs
layer.prompt使文本框为空的情况下也能点击确定的方法
2019/09/24 Javascript
微信小程序调用后台service教程详解
2020/11/06 Javascript
vue-video-player 断点续播的实现
2021/02/01 Vue.js
Python和JavaScript间代码转换的4个工具
2016/02/22 Python
python监控进程脚本
2018/04/12 Python
PyQt弹出式对话框的常用方法及标准按钮类型
2019/02/27 Python
安装好Pycharm后如何配置Python解释器简易教程
2019/06/28 Python
Python异常处理例题整理
2019/07/07 Python
python MD5加密的示例
2020/10/19 Python
德国受欢迎的旅游和休闲网站:lastminute.de
2019/09/23 全球购物
个人近期表现材料
2014/02/11 职场文书
电话客服专员岗位职责
2014/06/28 职场文书
合作与交流自我评价
2015/03/09 职场文书
Python实现信息轰炸工具(再也不怕说不过别人了)
2021/06/11 Python
Mysql实现简易版搜索引擎的示例代码
2021/08/30 MySQL