使用 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
});

下载:CitySelect

标签:

热门文章