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 1.4.2发布!主要是性能与API
Feb 25 Javascript
JS图片根据鼠标滚动延时加载的实例代码
Jul 13 Javascript
juery框架写的弹窗效果适合新手
Nov 27 Javascript
jquery实现带二级菜单的导航示例
Apr 28 Javascript
js浏览器本地存储store.js介绍及应用
May 13 Javascript
jQuery实现按钮只点击一次后就取消点击事件绑定的方法
Jun 26 Javascript
浅谈JavaScript中的对象及Promise对象的实现
Nov 15 Javascript
javascript实现tab响应式切换特效
Jan 29 Javascript
Bootstrap中的Panel和Table全面解析
Jun 13 Javascript
JavaScript面试题(指针、帽子和女朋友)
Nov 23 Javascript
微信小程序--组件(swiper)详细介绍
Jun 13 Javascript
vue学习笔记之v-if和v-show的区别
Sep 20 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得到mssql的存储过程的输出参数功能实现
2012/11/23 PHP
PHP中多维数组的foreach遍历示例
2014/06/13 PHP
php ImageMagick windows下安装教程
2015/01/26 PHP
PHP闭包函数详解
2016/02/13 PHP
thinkPHP5框架接口写法简单示例
2019/08/05 PHP
Javascript String.replace的妙用
2009/09/08 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
2013/07/09 Javascript
Javascript 绘制 sin 曲线过程附图
2014/08/21 Javascript
node.js读取文件到字符串的方法
2015/06/29 Javascript
js获取及判断键盘按键的方法
2015/12/01 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
2015/12/04 Javascript
javascript加减乘除的简单实例
2016/07/12 Javascript
jQuery文本框得到与失去焦点动态改变样式效果
2016/09/08 Javascript
解析如何利用iframe标签以及js制作时钟
2016/12/08 Javascript
JS实现打字游戏
2019/12/17 Javascript
[01:46]TI4西雅图DOTA2前线报道 中国选手抱团调时差
2014/07/08 DOTA
python+selenium开发环境搭建图文教程
2017/08/11 Python
python实现对csv文件的列的内容读取
2018/07/04 Python
django框架自定义用户表操作示例
2018/08/07 Python
详解Python数据分析--Pandas知识点
2019/03/23 Python
10分钟用python搭建一个超好用的CMDB系统
2019/07/17 Python
PyQt5中QTableWidget如何弹出菜单的示例代码
2020/02/23 Python
Python使用graphviz画流程图过程解析
2020/03/31 Python
Python字符串函数strip()原理及用法详解
2020/07/23 Python
python用tkinter实现一个gui的翻译工具
2020/10/26 Python
在canvas上实现元素图片镜像翻转动画效果的方法
2018/03/20 HTML / CSS
Nike澳大利亚官网:Nike.com (AU)
2019/06/03 全球购物
迪士尼英国官方商店:shopDisney UK
2019/09/21 全球购物
送给程序员的20个Java集合面试问题
2014/08/06 面试题
幼儿园评语大全
2014/04/17 职场文书
爱心捐书活动总结
2014/07/05 职场文书
护士自荐信怎么写
2015/03/06 职场文书
大学军训通讯稿
2015/07/18 职场文书
高效课堂教学反思
2016/02/24 职场文书
广告策划的实习心得体会总结!
2019/07/22 职场文书
php 解析非标准json、非规范json
2021/04/01 PHP