基于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)


相关推荐

  • CLLocation定位

    CLLocation定位importUIKitimportCoreLocationimportAlamofiretypealiasLocationClosure=((_sheng:String,_shi:String,_qu:String)->Void)classCLLocationTool:NSObject{publicstaticlet`default`=CLLocationTool.init()///定…

  • BeanUtils.copyProperties 用法

    BeanUtils.copyProperties 用法BeanUtils.copyProperties方法不用操作过多的set/get方法,两个类字段相同的时候我们可以通过此方法来进行复制,如有不想复制的属性则用第三个构造参数来进行,如果你只需要改其中的一个属性或者两个属性没必要重新get/set一边直接复制原来的类,付给新类属性名相同即可赋值。…

  • Tomcat的Manager显示403 Access Denied

    Tomcat的Manager显示403 Access Denied

  • VScode快捷键和设置

    VScode快捷键和设置一.快捷键单行注释 ctrl+/ 多行注释 alt+shift+a 复制上一行代码到下一行 alt+shift+↓ 移动代码到上一行或下一行 alt+↑,alt+↓ 返回到上次编辑位置 alt+← 跳转到指定文件 ctrl+p 全文搜索字符 ctrl+shift+f 格式化代码 shift+alt+f…

  • 交叉熵代价函数(损失函数)及其求导推导 (Logistic Regression)「建议收藏」

    交叉熵代价函数(损失函数)及其求导推导 (Logistic Regression)「建议收藏」前言交叉熵损失函数交叉熵损失函数的求导前言说明:本文只讨论Logistic回归的交叉熵,对Softmax回归的交叉熵类似。首先,我们二话不说,先放出交叉熵的公式:J(θ)=−1m∑i=1my(i)log(hθ(x(i)))+(1−y(i))log(1−hθ(x(i))),J(θ)=−1m∑i=1my(i)log⁡(hθ(x(i)))+(1−y(i))log⁡(1−hθ(…

  • the jdbc driver has been_the tomcat connector configured

    the jdbc driver has been_the tomcat connector configured使用JDBC连接MySql时出现:Theservertimezonevalue’�й���׼ʱ��’isunrecognizedorrepresentsmorethanonetimezone.YoumustconfigureeithertheserverorJDBCdriver(viatheserverTimezoneconfiguration…

发表回复

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

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