使用 jQuery 插件 CitySelect 实现省市联动效果

  |   2019年10月30日 |  Wordpress相关 |   评论已关闭 |   26

ad
有需要可以关注公众号:“技术的世界” 分享最新技术教程,解答技术问题,有任何问题在公众号上提问,抽空会尽力解答。 另外想要什么资源,可以回复“资源”或者私信后台,可以获得丰厚的资源包哦

使用 jQuery 插件 CitySelect 实现省市联动效果,

在一些和会员相关的注册系统中,让用户输入省市信息是非常常见的行为,并且一般都是要求做到省市区联动下拉效果,今天就给大家推荐一个 jQuery 插件 CitySelect,通过 JSON 数据实现省市联动效果:

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

CitySelect 演示:

CitySelect 使用

首先在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>

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

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

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

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

下载:


本站推荐使用的主机:,国外主机建议使用


转载请注明出处:http://ituq.cn/10844.html

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦