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

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

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

CitySelect 演示:

CitySelect 使用

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

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

<div id="city">
    
    
    
</div>

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

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

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

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

下载:CitySelect


©我爱水煮鱼,本站推荐使用的主机:阿里云,国外主机建议使用BlueHost

本站长期承接 WordPress 优化建站业务,请联系微信:「chenduopapa」。