基于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"
});

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

赞 (0)

相关推荐

  • 中国地区三级联动下拉菜单效果分析

    因为最近有需要用到中国地区三级联动下拉菜单,虽然用公司的框架已经实现,但是看的比较迷茫,就网上找了下相关代码,主要的数据和功能实现都是在js文件中,网上找的地区数据有的地方不完整,需要自己添加,虽然和公司的框架实现的代码不一样,还是先把代码放上了,以后需要的时候可以看看,大家也可以看看! 1.首先是js文件(area.js): 复制代码 代码如下: function Dsy() { this.Items = {}; } Dsy.prototype.add = function(id,iArray

  • jQuery实现的省市县三级联动菜单效果完整实例

    jQuery实现的省市县三级联动菜单效果完整实例

    本文实例讲述了jQuery实现的省市县三级联动菜单效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/

  • Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)

    本文主要介绍使用 Jquery+Ajax+xml,首先需要一个包含我国所有地图信息的xml文档. 此处选用的xml文档(共1000多行)主要结构如下: <?xml version="1.0" encoding="utf-8"?> <area Country="China"> <province ID="1" provinceID="110000" province="

  • jquery+ajax实现省市区三级联动效果简单示例

    本文实例讲述了jquery+ajax实现省市区三级联动效果.分享给大家供大家参考,具体如下: 一直想学习下Ajax,没时间,汗,这借口太牵强了.下了点教程在手机里,翻了好几遍了,没实战一次. 最近的项目里需要Ajax实现效果,就下了个jquery,然后找了个实例,学习了一下,幡然醒悟,NND,jquery果然强大的一塌糊涂,实现Ajax简直就是不费吹灰之力.下面把学习过程跟大家分享下,虽然还没有搞清楚jquery ajax的底层相关.不管了.我们不需要去发明轮子.呵呵. 先上代码,是一个省市区三

  • jQuery ajax实现省市县三级联动

    jQuery ajax实现省市县三级联动

    下面我们用Jquery,ajax,做一个省,市,县的三级联动: 下面是我做三级联动下拉的步骤以及逻辑 第一步:先做一个省市区表格 第二步:建个PHP页面显示用我是在<body>里放<div>用来接收要显示的省市区表格信息,里面嵌入jquery-1.11.2.min.js和自己封装的三联动省市区的方法 第三步:写封装方法用JS 第四步:做个纯php处理页面,这个页面处理传过来的任何代号 首先我们要建立数据库: 这就是包含省,市,县的数据库. 下面我们就写主页面:sanji.php:

  • 省市区三级联动jquery实现代码

    省市区三级联动jquery实现代码

    最近项目需要用到关于省市区三级联动下拉选择的功能,于是乎网上搜了一些做法,觉得有一些只是给出了小的案例,却很难找到详细的省.市.区的具体数据(其实,用baidu搜索就是这样啦),果断用google,搜出来的博文质量相当高,特此记录记录!!! 对于这个效果,其实我发现主要在于两点:1.jquery的筛选遍历操作:2.存储省.市.区这些数据时候的格式.另外一点是如何将获取得到的数据放到select option中(即下拉框中!) 对于第一个问题的解决,其实熟悉Jquery的博友估计是不难的,主要涉及

  • jquery读取xml文件实现省市县三级联动的方法

    jquery读取xml文件实现省市县三级联动的方法

    本文实例讲述了jquery读取xml文件实现省市县三级联动的方法.分享给大家供大家参考.具体如下: 页面代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'city.jsp' starting p

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

    省市区联动下拉效果在WEB中应用非常广泛,尤其在一些会员信息系统.电商网站最为常见.开发者一般使用Ajax实现无刷新下拉联动.本文将讲述,利用jQuery插件,通过读取JSON数据,实现无刷新动态下拉省市二(三)级联动效果. HTML 首先在head中载入jquery库和cityselect插件. <script type="text/javascript" src="js/jquery.js"></script> <script ty

  • jQuery+jsp实现省市县三级联动效果(附源码)

    jQuery+jsp实现省市县三级联动效果(附源码)

    本文实例讲述了jQuery+jsp实现省市县三级联动效果的方法.分享给大家供大家参考,具体如下: 在这里,用MySQL数据库存储了全国所有的省市县地区信息(点击此处下载源代码) 使用过的jar包 google的Gson.jar mysql-connector-java-5.1.13-bin.jar 将实验图贴出来: 显示页面index.jsp <%@ page language="java" import="java.util.*" pageEncoding=

  • jQuery JSON实现无刷新三级联动实例探讨

    复制代码 代码如下: <asp:DropDownList ID="ddl1" runat="server" Width="100px" ></asp:DropDownList> <asp:DropDownList ID="ddl2" runat="server" Width="100px" ></asp:DropDownList> <

  • 基于Vue2实现简易的省市区县三级联动组件效果

    这是一个基于Vue2的简易省市区县三级联动组件,可以控制只显示省级或只显示省市两级,可设置默认值等.提供原始省市县代码和名称数据,适用于各种有关城市区县的应用. 安装 我们使用npm安装: npm install v-distpicker --save 使用 首先在模板中加入组件: <v-distpicker></v-distpicker> 如果要带默认值,则可以这样: <v-distpicker province="广东省" city="广州市

  • 基于jquery实现省市区三级联动效果

    基于jquery实现省市区三级联动效果

    本文实现更新了项目的省市区三级联动数据,更新后最新的海南三沙都有,分享给所有需要的小伙伴们. JQUERY + JSON,无数据库,纯JS代码,无加密,无压缩,可直接使用在任何项目中. 说明:数据来源于国家统计局官网. 先上图: 绑定省市区 使用方法: 1. 引用JQUERY <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"&g

  • ajax实现省市三级联动效果

    本文实例为大家分享了ajax实现三级联动效果的具体代码,供大家参考,具体内容如下 1.html代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .wrap { background-color: beige; width: 400px

  • 使用vue2实现带地区编号和名称的省市县三级联动效果

    我们知道省市区县都有名称和对应的数字唯一编号,使用编号可以更方便查询以及程序处理,我们今天来了解一下使用vue2来实现常见的省市区下拉联动选择效果. 准备数据源 我们的省市区县的数据源来自本站文章 <基于Vue2的简易的省市区县三级联动组件> 中的districts.js,感谢 v-distpicker作者.districts.js中的数据格式大概是这样的: export default { 100000: { 110000: '北京市', 120000: '天津市', 130000: '河北

  • Ajax实现三级联动效果

    Ajax实现三级联动效果

    本文实例为大家分享了Ajax实现三级联动效果的具体代码,供大家参考,具体内容如下 一.导入数据表和gson.jar 该表包括了中国所有的省.市.县.区,它们之间通过parentid关联. 二.后端代码 由于每一级的数据都是根据上一级的id查询而来,逻辑十分相似,故我们只需要一个接口就可以完成三级甚至更多级的联动,在这个案例中我们的核心查询就是select * from area where parentid=#{pid} entity package com.codeXie.entity; im

随机推荐