jQuery 多选 - Select 全部和取消全选

Question

我的问题与jQuery Multiselect - Select All and with Filtered Search的目标相同，几乎完全相同；但是，我觉得它不是真正的副本的原因是我无法使用 Select All 和 Deselect All Public 方法。似乎只有改变 “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#" (仅在 link.

末尾添加“#”

我也在使用 jQuery MultiSelect 插件：http://loudev.com 和 quicksearch.js 作为搜索实用程序。但是，我的不同之处在于我使用的是 Visual Studio 2019，带有 MVC Razor 页面，以及 jquery-3.5.1.min.js.

下面列出了我的.cshtml 代码；直到显示“table”。

@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;
        });

一旦这部分开始工作，我就需要将它绑定到产生 table 显示的数据库，并且还必须根据显示的顺序让 table 显示详细信息selected/selection 列表的值已输入。

这是我的研究所能得到的。

更新： @Arbin Shrestha 这就是你的意思；（没用）？但是'#select-all'不应该已经能够找到'#my-select'因为它已经被初始化了吗？（我尝试将 href(s) 放在“select”构建之上和“selectableHeader:”内部作为一个分区。）

   <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();
            }
            },
            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>

Answer 1

可能是问题

$('#select-all')

js运行时找不到select-allid，因为是multiSelect创建的。

你可以试试：

$(document).on('click', '#select-all', function () {
...
});

或者在 multiSelect 初始化之后放置点击事件函数，

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

Answer 2

我终于想到检查工作页面上的视图源代码，看看它是如何工作的。没有声称完全理解它，但这是允许它工作的代码。

    <script type="text/javascript">
        // run multiSelect

        (function ($) {
            $(function () {
                $('.multiselect').multiSelect({});

                $('#my-select').multiSelect(
                    {
                        keepOrder: true,
                        selectableHeader: "<input type='text' class='search-input' autocomplete='off' placeholder='Selection Circuit Search'>",
                        selectionHeader: "<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').click(function ()
                {
                    $('#my-select').multiSelect('select_all');
                    return false;
                });

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

            });
        }) (jQuery);
    </script>

jQuery 多选 - Select 全部和取消全选

jQuery Multiselect - Select All and Deselect All

javascript

jquery

multi-select

selectall