Jquery City-picker是一款优秀的城市选择插件,可以帮助我们快速实现省市县三级联动,支持搜索及平滑滚动等功能。
使用该插件需要引入jquery库和city-picker.min.js文件,代码如下:
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="http://cdn.jsdelivr.net/gh/duowan/jsdelivr/city-picker.min.js"></script>
在HTML页面中添加一个input元素和一个button元素,用于触发城市选择窗口,代码如下:
<input type="text" id="city-picker" readonly>
<button id="select-city">选择城市</button>
在JavaScript中,使用如下代码初始化city-picker插件:
$("#city-picker").cityPicker({
title: "选择省市县",
showDistrict: true //是否显示县级
});
以上代码将会在input元素中生成一个城市选择器。我们还可以在options中添加一些其他选项,例如指定默认城市、禁用某些城市等。
插件还支持搜索功能。我们可以添加input元素,用于用户输入关键词,代码如下:
<input type="text" id="search-input">
在JavaScript中,使用如下代码启用搜索功能:
$("#city-picker").cityPicker({
title: "选择省市县",
showDistrict: true,
search: true,
searchInput: "#search-input" //指定搜索输入框
});
现在,用户在输入框中输入关键词后,插件会将匹配的城市显示在城市选择器中。
除此之外,插件还支持平滑滚动。如果我们想要实现城市选择器中的列表平滑滚动,可以在JavaScript中添加如下选项:
$("#city-picker").cityPicker({
title: "选择省市县",
showDistrict: true,
search: true,
searchInput: "#search-input",
smoothScroll: true //启用平滑滚动
});
以上就是Jquery City-picker的基本使用方法,它简化了城市选择器的实现,为我们的开发工作提供了便捷和效率。