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 live函数
Dec 24 Javascript
js 调用父窗口的具体实现代码
Jul 15 Javascript
js图片自动轮播代码分享(js图片轮播)
May 06 Javascript
node.js中的url.parse方法使用说明
Dec 10 Javascript
js获取当前日期前七天的方法
Feb 28 Javascript
jQuery Validate表单验证入门学习
Dec 18 Javascript
Bootstrap每天必学之导航条(二)
Mar 01 Javascript
iview给radio按钮组件加点击事件的实例
Sep 30 Javascript
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 jQuery
使用vue-cli webpack 快速搭建项目的代码
Nov 21 Javascript
async/await优雅的错误处理方法总结
Jan 30 Javascript
JS字典Dictionary类定义与用法示例
Feb 01 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下使用curl模拟用户登陆的代码
2010/09/10 PHP
php输出1000以内质数(素数)示例
2014/02/16 PHP
Thinkphp实现短信验证注册功能
2016/10/18 PHP
PHP 实现公历日期与农历日期的互转换
2017/09/13 PHP
js apply/call/caller/callee/bind使用方法与区别分析
2009/10/28 Javascript
基于Jquery实现的一个图片滚动切换
2012/06/21 Javascript
jquery常用特效方法使用示例
2014/04/25 Javascript
Javascript获取随机数的实现方法
2016/06/22 Javascript
Angularjs实现分页和分页算法的示例代码
2016/12/23 Javascript
easy ui datagrid 从编辑框中获取值的方法
2017/02/22 Javascript
使用OPENLAYERS3实现点选的方法
2020/09/24 Javascript
清空元素html(&quot;&quot;) innerHTML=&quot;&quot; 与 empty()的区别和应用(推荐)
2017/08/14 Javascript
jQuery实现碰到边缘反弹的动画效果
2018/02/24 jQuery
JavaScript中为事件指定处理程序的五种方式分析
2018/07/27 Javascript
vue-cli项目修改文件热重载失效的解决方法
2018/09/19 Javascript
微信小程序实现菜单左右联动
2020/05/19 Javascript
在Python的Django框架中更新数据库数据的方法
2015/07/17 Python
Python利用ansible分发处理任务
2015/08/04 Python
Python代理IP爬虫的新手使用教程
2019/09/05 Python
Python FFT合成波形的实例
2019/12/04 Python
python设置代理和添加镜像源的方法
2020/02/14 Python
python 解决print数组/矩阵无法完整输出的问题
2020/02/19 Python
详解Pandas 处理缺失值指令大全
2020/07/30 Python
浅析python 通⽤爬⾍和聚焦爬⾍
2020/09/28 Python
Dyson加拿大官方网站:购买戴森吸尘器,风扇,冷热器及配件
2016/10/26 全球购物
俄罗斯游戏商店:Buka
2020/03/01 全球购物
美国家居装饰店:Z Gallerie
2020/12/28 全球购物
仓库理货员岗位职责
2013/12/18 职场文书
2014政务公开实施方案
2014/02/19 职场文书
共产党员承诺书
2014/03/25 职场文书
2014五年级班主任工作总结
2014/12/05 职场文书
盗窃案辩护词
2015/05/21 职场文书
六一儿童节主持开场白
2015/05/28 职场文书
医务人员医德医风心得体会
2016/01/25 职场文书
个人业务学习心得体会
2016/01/25 职场文书
python绘制云雨图raincloud plot
2022/08/05 Python