一款带搜索、单选、多选的jQuery下拉方式选择城市的特效,可以直接输入搜索想要的城市名称,前面有箭头的都是可以点开选择二级菜单内容的,整体特效的实用性还是比较强的,喜欢的童鞋请收下吧。
页面的head部分,先引入一个CSS样式文件,然后设置好示例容器的样式,代码如下:
页面的body部分,3种类别分别放入不同的div容器里即可,代码如下:
<div id="demo">
<span>单选</span>
<div id="cityDanXuan" style="width:300px;">
</div>
<br />
<br />
<br />
<span>多选</span>
<div id="cityDuoXuan" style="width:300px;">
</div>
<br />
<br />
<br />
<span>默认</span>
<div id="cityMR" style="width:300px;" data-id="11-12-1301">
</div>
</div>
页面的底部,先引入jQuery库,然后引入两个必要的JS文件,并设置好插件的参数,代码如下:
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/citydata.js"></script>
<script type="text/javascript" src="js/hscheckdata.js"></script>
<script type="text/javascript">
$('#cityDanXuan').hsCheckData({
isShowCheckBox: false, //默认为false
data: cityData
});
$('#cityDuoXuan').hsCheckData({
isShowCheckBox: true, //默认为false
minCheck: 3,//默认为0,不限最少选择个数
maxCheck: 6,//默认为0,不限最多选择个数
data: cityData
});
$('#cityMR').hsCheckData({
isShowCheckBox: true,
data: cityData
});
</script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791