前端插件一：jQuery Multi-Select多选插件

最新推荐文章于 2024-06-04 09:48:28 发布

.NET跨平台

最新推荐文章于 2024-06-04 09:48:28 发布

阅读量3.6k

点赞数

分类专栏： Jquery及其组件

Jquery及其组件专栏收录该内容

147 篇文章 3 订阅

订阅专栏

项目

此项目是替换标准<select>（含有multiple属性的select标签）的一套交互友好的组件。

特点

免费（基于WTFPL许可证）
支持键盘操作
提供一些回调函数
css完全自定义
依赖jQuery 1.8以上版本
总大小约8kb

简单使用

HTML

<html>
    <head>
        <link href='styles/multi-select/multi-select.css' rel='stylesheet'>
    </head>
    <body>
        <select multiple='multiple' id='my-select' name='my-select'>
            <option value='选项1'>选项1</option>
            <option value='选项2'>选项2</option>
            <option value='选项3'>选项3</option>
            <option value='选项4'>选项4</option>
            <option value='选项5'>选项5</option>
            <option value='选项6'>选项6</option>
            <option value='选项7'>选项7</option>
            <option value='选项8'>选项8</option>
        </select>
        <script src='scripts//jquery-1.11.2.min.js' type='text/javascript'></script>
            <script src='scripts/multi-select/jquery.multi-select.js' type='text/javascript'></script>
    </body>
</html>

JavaScript

$('#my-select').multiSelect();

选项

`afterInit`

类型:function
默认值：function(container){}
初始化multiSelect后执行的方法。

`afterSelect`

类型:function
默认值：function(values){}
选中选项后执行的方法。

`afterDeselect`

类型:function
默认值：function(values){}
取消选中后执行的方法。

`selectableHeader`

类型：HTML/Text
默认值：null
自定义可选区域header。

`selectableFooter`

类型：HTML/Text
默认值：null
自定义可选区域footer。

`selectionHeader`

类型：HTML/Text
默认值：null
自定义已选区域header。

`selectionFooter`

类型：HTML/Text
默认值：null
自定义已选区域footer。

`disabledClass`

类型：String
默认值：‘disabled’
禁用状态选项的css class。

`selectableOptgroup`

类型：Boolean
默认值：false
为true时点击optgroup时等同于选中所有子选项。

`keepOrder`

类型：Boolean
默认值：false
为true时已选区域的选项根据选中顺序排序。

`dblClick`

类型：Boolean
默认值：false
为true时双击才会选中选项。

`cssClass`

类型：String
默认值：’’
在multiselect容器（.ms-container）上添加自定义css class。

方法

`.multiSelect(options)`

初始化multi-select多选插件。

$('#my-select').multiSelect({});

`.multiSelect('select', String|Array)`

选中匹配值的一项或多项。

$('#my-select').multiSelect('select', '选项1');
$('#my-select').multiSelect('select', ['选项1', '选项3']);

`.multiSelect('deselect', String|Array)`

取消选中匹配值的一项或多项。

$('#my-select').multiSelect('deselect', '选项2');
$('#my-select').multiSelect('deselect', ['选项2', '选项4']);

`.multiSelect('select_all')`

选中所有选项。

$('#my-select').multiSelect('select_all');

`.multiSelect('deselect_all')`

取消选中所有选项。

$('#my-select').multiSelect('deselect_all');

`.multiSelect('refresh')`

刷新当前multi-select。

$('#my-select').multiSelect('refresh');

`.multiSelect('addOption', Hash)`

以键值对形式动态添加选项到multi-select。

key        类型        是否必填        描述
value      String      true           需添加的选项值
text       String      true           需添加的选项内容    
index      Number      false          选项插入到从0开始的第几个位置，默认追加在选项的末尾
nested     String      false          如果存在optgroup，选项可以插入到某一optgroup下

$('#my-select').multiSelect('addOption', { value: 'test', text: 'test', index: 0, nested: 'optgroup_label' });

键盘操作

key            作用
[ ↓ ]下        选择下一个选项
[ ↑ ]上        选择上一个选项
[ — ]空格      选中当前选择的选项
[ ← ]左        切换到上一区域
[ → ]右        切换到下一区域

Demo

HTML

<div class="form-group p-t-xs">
    <div class="row">
        <div class="col-sm-6 p-r-lg">
            <p class="text-size-md line-height-xl pull-left m-b-0">选择联系人</p>
            <button type="button" class="selectAll btn btn-link text-size-sm pull-right">全选</button>
        </div>
        <div class="col-sm-6 p-r-0">
            <button type="button" class="deselectAll btn btn-link text-size-sm pull-right">全选</button>
        </div>
    </div>
    <select id="optgroup" multiple="multiple">
        <option value="李一">李一</option>
        <option value="李二">李二</option>
        <option value="李三">李三</option>
        <option value="李四">李四</option>
        <option value="李五">李五</option>
        <option value="李六">李六</option>
        <option value="李七">李七</option>
        <option value="李八">李八</option>
        <option value="李九">李九</option>
        <option value="李十">李十</option>
    </select>
</div>

JavaScript

// 初始化
$('#optgroup').multiSelect({
    selectableHeader: '<i class="fa fa-search pull-right p-r-sm" style="position:relative;top:9px;z-index:1;"></i><input class="search-input col-sm-12 border text-size-sm p-r-xl" type="text" placeholder="已有联系人" style="border-bottom:0;border-radius:3px 3px 0 0;padding-top:3px;padding-bottom:3px;margin-top:-13px;">',
    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;">',
    selectableOptgroup: true,
    afterSelect: function (values) {
        select.modifyselectNum('#optgroup');
    },
    afterDeselect: function (values) {
        select.modifyselectNum('#optgroup');
    }
});

// 可选全选按钮
$('button.selectAll').click(function(){
    $(selectId).multiSelect('select_all');
    return false;
});

// 已选全选按钮
$('button.deselectAll').click(function(){
    $(selectId).multiSelect('deselect_all');
    return false;
});

// 搜索框实时查询
$('input.search-input').on('input propertychange', function() {
    var inputValue = $(this).val().trim();
    var $selections = $(selectId).siblings('.ms-container').find('.ms-selectable li.ms-elem-selectable');
    $selections.each(function () {
        var thisValue = $(this).children('span').text();
        if (thisValue.match(inputValue)) {
            $(this).show();
        } else {
            $(this).hide();
        }
    });
});

效果预览

图片描述

.NET跨平台

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
3
评论
前端插件一：jQuery Multi-Select多选插件

项目此项目是替换标准（含有multiple属性的select标签）的一套交互友好的组件。特点免费（基于WTFPL许可证）支持键盘操作提供一些回调函数css完全自定义依赖jQuery 1.8以上版本总大小约8kb简单使用HTML 选项1 选项2 ...
复制链接

扫一扫

专栏目录