首页 | 2915 | 594 | 297 | 添加收藏 上一个 下一个
jQuery下拉框多选插件verSelector.js

一、使用须知:


verSelector.js是一款select下拉框多选与关键字筛选插件,解决了select控件不支持多选及搜索筛选的问题,2.0版本是在1.0版本的基础上进行优化提升,ui界面风格更加美化,针对许多网友提出的修改建议有做相关的参考。


二、使用方法


实例select选框


<div id="search"></div>
<script>
var select = new verjs_select();
select.render({
  elem: "#search",
  data: [{id: 1, name: "123456"}, {id: 2, name: "哈哈哈哈"}],
  init_value: [1],
  checkbox: true,
  name: "test"
});
</script>

render方法相关参数说明


参数名称参数类型缺省值参数说明
elemstringnull实例化select对象,推荐使用id
dataarray[]实例化对象选项
init_valuearray[]实例化对象默认选中的值
checkboxboolfalse是否开启多选,默认为关闭
namestringnull表单中的name键值,需要通过get_form_value获取,默认为空
bindidstringid表单中的键值,及selecte-option中的value值,在data中必须存在该值
keystringnameselect款中选项的显示值,在data中必须存在该值
heightstring35px选择框显示高度
widthstring220px选择框显示长度
body_heightnumber354下拉框高度
placeholderstring请选择选择框默认显示字符
search_textstring请输入搜索内容搜索框默认提示文字
empty_searchstring没有可选择信息空数据提示文字

get_form_value方法


获取select选中的值


携带参数


参数名称说明示例
selectedselect选择框,在实例化时的elem值select.get_form_value("search");

返回参数


如实例化是name值不为空则返回json数据,name值为空则返回选择的值。


get_value方法


获取select选中的参数


携带参数


参数名称说明示例
selectedselect选择框,在实例化时的elem值select.get_value("search");

返回参数


返回为一段json数组,为选中的data值


verSelector.js 1.0


一、使用须知:
verSelector.js是一款select下拉框多选与关键字筛选插件,解决了select控件不支持多选及搜索筛选的问题


二、方法介绍
使用verSelector.js只需在js中new一个既可以使用,如下面实例:


new verSelector();
<div>
    <h5>单选</h5>
    <select name="search" id="search" data-selector>
        <option value="">请选择</option>
    </select>
</div>
<div>
    <h5>多选</h5>
    <select name="searchs" id="searchs" data-selector data-selector-checks="true">
        <option value="">请选择</option>
    </select>
</div>

三、属性说明


1, data参数


data-selector:插件关键字,在select中加入该关键字同时实例插件即可支持搜索相关关键词选择
data-selector-checks:多选关键词,加入关键词且赋值为true即可支持多选搜索条件,在加入此关键词之前需要加入data-selector关键词


2, IE浏览器暂时支持9.0以上版本使用