当前位置:首页 > 网页设计 >Javascript >

jquery multiselect使用方法

发布时间:2020-11-28 10:43:43 作者:佚名 阅读:(22)

最近在做一个项目需要用到多选,在网上发现了一个jquery的插件multiselect,使用起来很方法,接下来吾爱编程为大家详细介绍一下jquery multiselect使用方法,有需要的小伙伴可以参考一下:

1、介绍:

    jquery-multiselect 基于Jquery-ui的组件体系。MultiSelect逐步增强了一个普通的多选控件,使之成为优雅的复选框下拉列表,并可使用鼠标滚轮进行标记。

2、使用方法:

    (1)、引入js、css文件

<link href="mselect/css/multi-select.css" media="screen" rel="stylesheet" type="text/css">
<script src="mselect/js/jquery.multi-select.js" type="text/javascript"></script>
<script src="mselect/js/jquery.quicksearch.js" type="text/javascript"></script>

    jquery.quicksearch.js文件的引入是因为我们在使用的时候用到了筛选的功能,具体截图如下

    (2)、html代码

<select multiple="multiple" id="xiangguan_zts" name="xiangguan_heji[]" style="position: absolute; left: -9999px;">
  <option value="1">卡牌策略游戏大全</option>
  <option value="2">策略手游合集</option>
  <option value="3">回合制手游大全</option>
  <option value="4">植物大战僵尸游戏大全</option>
  <option value="5">塔防游戏大全</option>
</select>

    (3)、js代码

<script>
    $('#xiangguan_zts').multiSelect({
        selectableHeader: "<div class='custom-header'>选择合集</div><input type='text' class='inpMain search-input' size='55' autocomplete='off' placeholder='局部搜索'>",
        selectionHeader: "<div class='custom-header'>已选合集</div><input type='text' class='inpMain search-input' size='55' autocomplete='off' placeholder=''>",
        afterInit: function(ms){
            var that = this,
                $selectableSearch = that.$selectableUl.prev(),
                $selectionSearch = that.$selectionUl.prev(),
                selectableSearchString = '#'+that.$container.attr('id')+' .ms-elem-selectable:not(.ms-selected)',
                selectionSearchString = '#'+that.$container.attr('id')+' .ms-elem-selection.ms-selected';

            that.qs1 = $selectableSearch.quicksearch(selectableSearchString)
                .on('keydown', function(e){
                    if (e.which === 40){
                        that.$selectableUl.focus();
                        return false;
                    }
                });

            that.qs2 = $selectionSearch.quicksearch(selectionSearchString)
                .on('keydown', function(e){
                    if (e.which == 40){
                        that.$selectionUl.focus();
                        return false;
                    }
                });
            if($('.ms-container .ms-selection li.ms-selected').length>0){
                $('.ms-container .ms-selection li.ms-selected').eq(0).append('');
            }
        },
        afterSelect: function(){
            if($('.ms-container .ms-selection li.ms-selected').length==1){
                $('.ms-container .ms-selection li.ms-selected').eq(0).append('');
            }
            this.qs1.cache();
            this.qs2.cache();
        },
        afterDeselect: function(){
            $('.ms-container .ms-selection li .tuijian').remove();
            $('.ms-container .ms-selection li.ms-selected').eq(0).append('');
            this.qs1.cache();
            this.qs2.cache();
        },
        keepOrder:true,
    });
</script>

3、相关参数:

Nametypedefaultdescription
afterInitfunctionfunction(container){}Function to call after the multiSelect initilization.
afterSelectfunctionfunction(values){}Function to call after one item is selected.
afterDeselectfunctionfunction(values){}Function to call after one item is deselected.
selectableHeaderHTML/TextnullText or HTML to display in the selectable header.
selectionHeaderHTML/TextnullText or HTML to display in the selection header.
selectableFooterHTML/TextnullText or HTML to display in the selectable footer.
selectionFooterHTML/TextnullText or HTML to display in the selection footer.
disabledClassString'disabled'CSS class for disabled items.
selectableOptgroupBooleanfalseClick on optgroup will select all nested options when set to true.
keepOrderBooleanfalseThe selected items will be displayed in the same order than they are selected.
dblClickBooleanfalseReplace the defautl click event to select items by the dblclick one.
cssClassString""Add a custom CSS class to the multiselect container.

4、常用方法:

    (1)、初始化:

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

    (2)、选择具有参数中给定值的项目。该值可以是与选项值匹配的字符串('elem_1'),也可以是值数组(['elem_1','elem_42'])。

$('#your-select').multiSelect('select', String|Array);

    (3)、取消选择具有参数中给定值的项目。该值可以是与选项值匹配的字符串('elem_1'),也可以是值数组(['elem_1','elem_42'])。

$('#your-select').multiSelect('deselect', String|Array);

    (4)、取消选择先前选择的所有项目。

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

    (5)、选择所有元素。

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

    (6)、刷新当前的多选。

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

    PS:在使用以上方法的时候都要先使用方法(1)先进行初始化

5、相关参考:

    (1)、本站例子使用文件:multiselect

    (2)、github开源地址:https://github.com/ehynds/jquery-ui-multiselect-widget

    (3)、参考演示:http://loudev.com/#home


以上就是吾爱编程为大家介绍的关于multiselect使用方法,了解更多相关文章请关注吾爱编程网!


欢迎分享转载→ jquery multiselect使用方法

© 2015-2021 - 吾爱编程网 版权所有 苏ICP备18033726号-1关于我们 - 网站声明 - 联系我们