Jquery-Multiselect插件的使用

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

第二步：引入Jquery、Bootstrap插件、jquery.multi-select.min.js以及相关的css文件
1. 我这里演示都是使用CDN加速

第三步：页面加入select标签以及静态选项，后面会加动态选项以及数据回显功能

</select>

</div>

第四步：在js中进行插件的初始化操作：

$(function() {

// 初始化

$('#optgroup').multiSelect({

selectableHeader: '<input class="col-sm-12 border bg-white text-size-sm" type="text" disabled placeholder="所有联系人" style="border-bottom:0;border-radius:3px 3px 0 0;padding-top:3px;padding-bottom:3px;"><br>',

selectionHeader: '<input class="col-sm-12 border bg-white text-size-sm" type="text" disabled placeholder="已选联系人" style="border-bottom:0;border-radius:3px 3px 0 0;padding-top:3px;padding-bottom:3px;"><br>',

selectableOptgroup: false,

afterSelect: function(values) {

select.modifyselectNum('#optgroup');

afterDeselect: function(values) {

select.modifyselectNum('#optgroup');

}

});

</script>

//对初始化文件的解读：

$('#optgroup').multiSelect({option})
1. 这个行代码就是初始化控件，option可以为空，显示的就是最基本的样式。也可以一些属性，具体的详见官网文档。
selectableHeader和selectionHeader：可以在控件的上方添加两个输入框，也可以用来做提示，内容过多的话还能用作搜索框。
selectableOptgroup：是否分组。
afterSelect：选中之后的操作，里面可以增加我们定义的选中之后的业务逻辑。
afterDeselect ：取消选中之后的操作，里面可以增加我们取消选中之后的业务逻辑。
以上是基本的属性，详细的官网有案例和说明。

afterSelect: function(values) {

console.log("选中了"+values)

afterDeselect: function(values) {

console.log("取消了"+values)

}

控制台输出：

Jquery-Multiselect插件的使用

猜你喜欢