脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → 基于jQuery+JSON的省市二三级联动效果

基于jQuery+JSON的省市二三级联动效果

 更新时间：2015年06月05日 10:53:31   投稿：hebedich  
本文给大家分享的是利用jQuery插件，通过读取JSON数据，实现无刷新动态下拉省市二（三）级联动效果，十分的简单实用，效果也非常棒，有需要的小伙伴可以参考下。

省市区联动下拉效果在WEB中应用非常广泛，尤其在一些会员信息系统、电商网站最为常见。开发者一般使用Ajax实现无刷新下拉联动。本文将讲述，利用jQuery插件，通过读取JSON数据，实现无刷新动态下拉省市二（三）级联动效果。

HTML

首先在head中载入jquery库和cityselect插件。

 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.cityselect.js"></script>

接下来，我们在#city中，放置三个select，并且三个select分别设置class属性为：prov、city、dist，分别表示省、市、区（县）三个下拉框。注意如果只想实现省市二级联动，则去掉第三个dist的select即可。

 
<div id="city"> 
   <select class="prov"></select> 
  <select class="city" disabled="disabled"></select> 
  <select class="dist" disabled="disabled"></select> 
</div>

jQuery

调用cityselect插件非常简单，直接调用：

 
$("#city").citySelect();

自定义参数调用，设置默认省市区。

 
$("#city").citySelect({ 
  url:"js/city.min.js", 
  prov:"湖南", //省份 
  city:"长沙", //城市 
  dist:"岳麓区", //区县 
  nodata:"none" //当子集无数据时，隐藏select 
});

当然，你还可以扩展，自定义下拉列表选项数据，你可以根据需要设置下拉内容，注意数据格式一定要为JSON格式。

 
$("#city").citySelect({ 
  url:{"citylist":[ 
    {"p":"前端技术","c":[{"n":"HTML"},{"n":"CSS","a":[{"s":"CSS2.0"},{"s":"CSS3.0"}]}, 
    {"n":"JAVASCIPT"}]}, 
    {"p":"编程语言","c":[{"n":"C"},{"n":"C++"},{"n":"PHP"},{"n":"JAVA"}]}, 
    {"p":"数据库","c":[{"n":"Mysql"},{"n":"SqlServer"},{"n":"Oracle"}]}, 
  ]}, 
  prov:"", 
  city:"", 
  dist:"", 
  nodata:"none" 
});

你还可以利用PHP等后台语言将数据库中的数据转换成JSON格式，然后使用url参数指向后台地址也能实现无刷新联动效果。

 
$("#city").citySelect({ 
  url:"data.php" 
});

以上所述就是本文的全部内容了，希望大家能够喜欢。

您可能感兴趣的文章:

相关文章

  • jQuery模拟原生态App上拉刷新下拉加载更多页面及原理

    jQuery模拟原生态App上拉刷新下拉加载更多页面及原理

    很多App中,新闻或者展示类都存在下拉刷新和上拉加载的效果，如何实现上拉刷新下拉加载更多页面的呢？下面小编通过下面内容给大家介绍jQuery模拟原生态App上拉刷新下拉加载更多页面及原理，需要的朋友可以参考下
    2015-08-08
  • jQuery实现Select下拉列表进行状态选择功能

    jQuery实现Select下拉列表进行状态选择功能

    本文主要介绍了jQuery实现Select下拉列表进行状态选择功能的代码。具有很好的参考价值，下面跟着小编一起来看下吧
    2017-03-03
  • 基于JQuery的模拟苹果桌面Dock效果(稳定版)

    基于JQuery的模拟苹果桌面Dock效果(稳定版)

    之所以将它命名为稳定版，是因为之前已经分享了一个初级版本的，之前的初级版中存在很多bug。现在经过反复琢磨、实验，修复了之前版本存在的很多不足之处，就算鼠标快速的滑动依然表现的很稳定
    2012-10-10
  • jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例

    jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例

    这篇文章主要介绍了jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作,结合实例形式分析了jQuery+Ajax请求json格式数据并渲染到html页面相关步骤与操作技巧,需要的朋友可以参考下
    2020-06-06
  • jQuery实现的Div窗口震动特效

    jQuery实现的Div窗口震动特效

    这篇文章主要介绍了jQuery实现的Div窗口震动特效 ,需要的朋友可以参考下
    2014-06-06
  • 根据Bootstrap Paginator改写的js分页插件

    根据Bootstrap Paginator改写的js分页插件

    本文主要对根据Bootstrap Paginator改写的js插件进行详细介绍，具有很好的参考价值，需要的朋友一起来看下吧
    2016-12-12
  • jQuery实现导航回弹效果

    jQuery实现导航回弹效果

    本文主要介绍了jQuery实现导航回弹效果的实例，具有很好的参考价值，下面跟着小编一起来看下吧
    2017-02-02
  • 20个最新的jQuery插件

    20个最新的jQuery插件

    jQuery 是一个非常优秀的 JavaScript 框架，使用简单灵活，同时还有许多成熟的插件可供选择，它可以帮助你在项目中加入一些非常好的效果
    2012-01-01
  • jQuery实现的类flash菜单效果代码

    jQuery实现的类flash菜单效果代码

    这里要说的就是一个菜单的hover的效果，一般我们通过CSS的伪类:hover实现的菜单切换都比较单调，因为仅仅是一个简单的图片的变化，不像很多flash菜单一样变化非常的平滑，但是这里我们就是要用非flash的技术实现一个平滑的hover效果。
    2010-05-05
  • jQuery simpleModal插件的使用介绍

    jQuery simpleModal插件的使用介绍

    SimpleModal是一个轻量级的jQuery插件，它提供了一个模式对话框发展强大的接口。这篇文章主要介绍了jQuery simpleModal插件的使用，非常不错，具有参考借鉴价值，对jquery simplemodal相关知识感兴趣的朋友一起学习吧
    2016-08-08

最新评论