【发布时间】：2020-08-26 15:13:28
【问题描述】：
我的问题与jQuery Multiselect - Select All and with Filtered Search的目标相同，几乎完全一样；但是，我觉得它不是实际重复的原因是我无法让 Select All 和 Deselect All Public Methods 工作。似乎只会改变 “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，以及用于搜索实用程序的 quicksearch.js。但是，我的不同之处在于我使用的是带有 MVC Razor 页面的 Visual Studio 2019 和 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;
});
一旦这部分工作，我需要将它绑定到生成表格显示的数据库，并且还必须根据输入选择/选择列表值的顺序来显示表格详细信息。
这是我的研究所能得到的。
更新： @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>
【问题讨论】：
标签： javascript jquery multi-select selectall