一款可单选或多选的jQuery选择小插件,演示页面给出了多选、单选、默认已选的几种效果,选择的内容会有不同的图标显示,可以点击“扫帚”图标来清除已选内容。
页面的head部分,需引入图标字体样式和选择插件样式、jQuery库和选择插件,代码如下:
<link type="text/css" rel="stylesheet" href="css/iconfont.css"/>
<link type="text/css" rel="stylesheet" href="css/multiselect.css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/multiselect.js"></script>
页面的body部分,设置不同选择类型的对应容器,代码如下:
<h3>多选:</h3>
<div id="test"></div>
<span>结果:</span><input type="text" id="testValue"/>
<h3>单选:</h3>
<div id="test2"></div>
<span>结果:</span><input type="text" id="testValue2"/>
<h3>已选:</h3>
<div id="test3"></div>
<span>结果:</span><input type="text" id="testValue3"/>
<h3>关于选择类型(checkStyle):</h3>
<div style="height: 25px"><b style="margin-right: 10px;"><span>yx(圆心):</span></b><span><i class="iconfont icon-xuanzhong"></i></span><span><i class="iconfont icon-weixuanzhong1"></i></span></div>
<div style="height: 25px"><b style="margin-right: 10px;"><span>yg(圆钩):</span></b><span><i class="iconfont icon-xuanzhong1"></i></span><span><i class="iconfont icon-weixuanzhong1"></i></span></div>
<div style="height: 25px"><b style="margin-right: 10px;"><span>fx(方心):</span></b><span><i class="iconfont icon-CombinedShapeCopy"></i></span><span><i class="iconfont icon-weixuanzhong"></i></span></div>
<div style="height: 25px"><b style="margin-right: 10px;"><span>fg(方钩):</span></b><span><i class="iconfont icon-xuanzhong3"></i></span><span><i class="iconfont icon-weixuanzhong"></i></span></div>
页面的底部,对指定容器启用插件并设置好相应参数,代码如下:
$("#test").multiselectInit({
"selectData":[{"colId":1,"colValue":"苹果"},{"colId":2,"colValue":"香蕉"},{"colId":3,"colValue":"菠萝"},{"colId":4,"colValue":"西瓜"},{"colId":5,"colValue":"甘蔗"}],
"isMulti":true,//是否多选
"inputId":"testValue",//输入框的id
"checkStyle":"fg"//选择的样式
});
$("#test2").multiselectInit({
"selectData":[{"colId":1,"colValue":"苹果"},{"colId":2,"colValue":"香蕉"},{"colId":3,"colValue":"菠萝"},{"colId":4,"colValue":"西瓜"},{"colId":5,"colValue":"甘蔗"}],
"isMulti":false,//是否多选
"inputId":"testValue2",//输入框的id
"checkStyle":"yx"//选择的样式
});
$("#test3").multiselectInit({
"selectData":[{"colId":1,"colValue":"苹果"},{"colId":2,"colValue":"香蕉"},{"colId":3,"colValue":"菠萝"},{"colId":4,"colValue":"西瓜"},{"colId":5,"colValue":"甘蔗"}],
"isSelectData":[{"colId":1,"colValue":"苹果"},{"colId":2,"colValue":"香蕉"},{"colId":3,"colValue":"菠萝"}],
"isMulti":true,//是否多选
"inputId":"testValue3",//输入框的id
"checkStyle":"fx"//选择的样式
});
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791