带搜索、单选、多选的jQuery下拉方式选择城市

来源:https://www.sucaihuo.com/js/2549.html 2017-07-26 23:01浏览(1396) 收藏

一款带搜索、单选、多选的jQuery下拉方式选择城市的特效,可以直接输入搜索想要的城市名称,前面有箭头的都是可以点开选择二级菜单内容的,整体特效的实用性还是比较强的,喜欢的童鞋请收下吧。
带搜索、单选、多选的jQuery下拉方式选择城市
分类:导航菜单 > 二级菜单 难易:初级
查看演示 下载资源 下载积分: 20 积分

页面的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>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2