jQuery Multiselect-全选并取消全选

编程问答 2022-08-14

问题描述

我的问题的目标与jQuery Multiselect - Select All and with Filtered Search相同，并且几乎完全相同；但是，我觉得这不是实际的重复项，是因为我无法使用“全选”和“取消全选所有公共方法”来工作。似乎只有改变 “ http：// localhost：51918 / Circuits_View？SQL = Select％20％2A％20from％20Circuits_View％20order％20by％20CIRCUIT％3B” “ http：// localhost：51918 / Circuits_View？SQL = Select％20％2A％20from％20Circuits_View％20order％20by％20CIRCUIT％3B＃”（仅在链接末尾添加“＃”。

我还使用了jQuery MultiSelect插件：http://loudev.com和searchsearch.js。但是，我的区别是我使用的是Visual Studio 2019，带有MVC Razor页面和jquery-3.5.1.min.js。

下面列出了我的.cshtml代码；直到“表格”显示为止。

@model IEnumerable<Mvc.Models.Circuits_View>
@using Mvc.Variables;
@{
    ViewBag.Title = "Index";
    <link href="~/Content/bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/multi-select.css" rel="stylesheet" type="text/css" />

}
<h3>
    Circuits - @DateTime.Now.ToString()


</h3>
<body>
    <select multiple="multiple" id="my-select" name="my-select[]">
        <option value='cheese'>Cheese</option>
        <option value='beef'>Beef</option>
        <option value='bacon'>Bacon</option>
        <option value='sausage'>Sausage</option>
        <option value='mushrooms'>Mushrooms</option>
        <option value='ham'>Ham</option>
        <option value='sauce'>Sauce</option>
        <option value='handtossed'>Handtossed</option>
    </select>
    <script src="~/Scripts/jquery-3.5.1.min.js" type="text/javascript"></script>
    <script src="~/Scripts/bootstrap.min.js" type="text/javascript"></script>
    <script src="~/Scripts/jquery.quicksearch.js" type="text/javascript"></script>
    <script src="~/Scripts/jquery.multi-select.js" type="text/javascript"></script>
    <script type="text/javascript">
        // run multiSelect
        $('#my-select').multiSelect({
            keepOrder: true,selectableHeader: "<div><a href='#' id='select-all'>Select All</a></div><input type='text' class='search-input' autocomplete='off' placeholder='Selection Circuit Search'>",selectionHeader:  "<div><a href='#' id='deselect-all'>Deselect All</a></div><input type='text' class='search-input' autocomplete='off' placeholder='Selected Circuit Search'>",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;
                        }
                    });
            },afterSelect: function () {
                this.qs1.cache();
                this.qs2.cache();
            },afterDeselect: function () {
                this.qs1.cache();
                this.qs2.cache();
            }
        });
        $('#select-all').on('click',function () {
            $('#my-select').multiSelect('select_all');
            return false;
        });
        $('#deselect-all').on('click',function () {
            $('#my-select').multiSelect('deselect_all');
            return false;
        });
    </script>

我尝试使用的原始编码格式

        $('#select-all').click(function () {
            $('#my-select').multiSelect('select_all');
            return false;
        });

，以及@tmarois使用“ .on”的编码格式，据说这种编码格式是有效的。

        $('#select-all').on('click',function () {
            $('#my-select').multiSelect('select_all');
            return false;
        });

这部分工作后，我将需要将其绑定到数据库中以产生表显示，并且还必须根据输入选定/选择列表的值的顺序使表显示详细信息。 / p>

就我的研究所能得到的。

更新： @Arbin Shrestha是您的意思；（那没用）？但是，由于“＃select-all”已经初始化，所以它不应该已经能够找到“＃my-select”吗？ （我尝试将href既放在“ select”内部，也放在“ selectableHeader：”内部作为分隔。）

   <script type="text/javascript">
        // run multiSelect
        $('#my-select').multiSelect({
            keepOrder: true,selectionHeader: "<div><a href='#' id='deselect-all'>Deselect All</a></div><input type='text' class='search-input' autocomplete='off' placeholder='Selected Circuit Search'>",afterDeselect: function () {
                this.qs1.cache();
                this.qs2.cache();
            }
            },function () {
                $('#select-all').click(function () {
                    $('#my-select').multiSelect('select_all');
                    return false;
                });
            },function () {
                $('#deselect-all').click(function () {
                    $('#my-select').multiSelect('deselect_all');
                    return false;
                });
            }
        );
    </script>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascriptjquerymulti-selectselectall