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

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

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

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

<script src="jquery.js"></script> 
<script src="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>

注意:这三个class的名称不能随便修改。

jQuery
调用cityselect插件非常简单,直接调用:

$(function(){
    $("#city").citySelect(); //这个city对应上面定义的div的id
});

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

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

注意:作者原文有很多读者留言说不能使用,主要就是这个url地址不对造成的,这个地址必须指向系统的根目录(很多项目的图片、JS和css都放在根目录的一个文件夹中,如这个目录是static,url地址就是:/static/js/city.min.js,要确保JS文件已放到此处),否则会读不到省市数据源,这就是很多读者反映的下拉列表为空的问题所在。

当然,你还可以扩展,自定义下拉列表选项数据,注意数据格式一定要为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" 
});

文件下载地址:源码下载

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/113452.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 数据挖掘项目总结文档模板_数据挖掘实训心得

    数据挖掘项目总结文档模板_数据挖掘实训心得数据挖掘项目总结文档1、文档概述1.1编写目的记录本次实验思路及流程,备忘用。1.2适用对象个人学习总结,描述有偏差之处陆续更进。2、业务理解与分析定义2.1需求概述针对传统网络入侵检测系统存在的误判以及漏检情况,采用数据挖掘的指导思想,通过大量的攻击样本数据进行知识发现,本次实验采用的kdd99数据集,其中包含了大量的模拟攻击行为。1998年美国国防

  • 用.NET开发的磁力搜索引擎——btbook.net「建议收藏」

    用.NET开发的磁力搜索引擎——btbook.net「建议收藏」去年10月份开始研究相关的协议与资料,中途乱七八糟的事情差点没坚持下来,寒假期间修修补补,上礼拜把Btbook发布了,经过社交网络发布之后,发生了裂变式的分享,上线第三天UV就达到了两万多,也算是对这

  • 【算法详解】洗牌算法[通俗易懂]

    【算法详解】洗牌算法[通俗易懂]1.问题描述

  • 详解Java异或运算符

    详解Java异或运算符文章原地址目录目录 性质 应用举例 其他用途示例 异或是一种基于二进制的位运算,用符号XOR或者^表示,其运算法则是对运算符两侧数的每一个二进制位同值则取0,异值则取1.简单理解就是不进位加法,如1+1=0,0+0=0,1+0=1.Forexample:3^5=6转成二进制后就是0011^0101二号位和三号位都是异值取1末尾两个1同值取零,…

  • 从硬盘上安装Fedora12

    从硬盘上安装Fedora12一、引言Fedora12的liveCD:Fedora-12-i686-Live.iso,至今未硬盘安装成功。在引导过程中,报此类错误:[drm:drm_mode_rmfb]triedtoremoveafbthatwedidntown无奈之下,只好下载Fedora12的DVD版:Fedora12-i386-DVD.iso文件比较大,2G多一些。

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号