I am trying to use the http://loudev.com/ jQuery MultiSelect Plugin to change an MVC Razor table display page from displaying all results in the bound database view, to only displaying the selected results from the plugin; (which is also bound to the same view). I found this answer:
By using Jquery $('select#fm_delivery_or_collection').val() the val function called from the select will return an array if its a multiple.
in another question - How to get all selected option text form multi select Using Javascript
UPDATE - I hope this is more concise. I Replaced what I currently had as code with a paired down version of what I currently do have; as I've hopefully gotten closer to solving the issue. (The snippet still shows all of the table fields.)
Global Variable
using System;
namespace Mvc.Variables
{
public static class Globals
{
public static string[] ary_Circuits;
}
}
Index.cshtml
@model IEnumerable<Mvc.Models.Circuits_View>
@using Mvc.Variables;
@using System.Configuration;
@using System.Data.SqlClient;
@using System.Collections.Generic;
@{
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>
<a href='#' id='select-all'>Select All</a>
<a href='#' id='deselect-all'>Deselect All</a>
<button type="submit" onclick="mySelected()">Display Circuits</button>
<select multiple="multiple" id="my-select">
@foreach (var choice in Model)
{
<option value='@Html.DisplayFor(modelItem => choice.CIRCUIT)'>@Html.DisplayFor(modelItem => choice.CIRCUIT)</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
(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);
function mySelected()
{
Globals.ary_Circuits.val() = $('select#my-select').val();
return Globals.ary_Circuits.val();
};
</script>
<table class="table">
<thead>
<tr style="font-size:20px;">
<th width="90">
<b>
@Html.DisplayNameFor(model => model.CIRCUIT)
</b>
</th>
</tr>
</thead>
</table>
<hr style="background-color:rgb(0,0,0);" />
<div style="max-height:335px;overflow:auto;">
<table class="table table-bordered table-condensed table-striped">
@if (Globals.ary_Circuits != null)
{
foreach (var circuit in Globals.ary_Circuits)
{
foreach (var item in Model)
{
if (circuit == item.CIRCUIT)
{
<tr>
<td>
@Html.ActionLink(item.CIRCUIT, null, "AmpLoadDaily", new { device = item.CIRCUIT }, null)
</td>
</tr>
}
}
}
}
</table>
</div>