javascript - 如何将多选结果用作@foreach 函数数组？

Question

我正在尝试使用http://loudev.com/ jQuery MultiSelect Plugin 将 MVC Razor 表显示页面从显示绑定数据库视图中的所有结果更改为仅显示插件中的选定结果；（这也绑定到同一个视图）。我找到了这个答案：

通过使用 Jquery $('select#fm_delivery_or_collection').val() 从 select 调用的 val 函数将返回一个数组，如果它是一个倍数。

在另一个问题中 -如何使用 Javascript 获取所有选定的选项文本表单多选

更新- 我希望这更简洁。我用我目前拥有的配对版本替换了我目前拥有的代码；因为我希望更接近解决问题。（该片段仍显示所有表字段。）

全局变量

using System;

namespace Mvc.Variables
{
    public static class Globals
    {
        public static string[] ary_Circuits;
    }
}

索引.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>
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    <a href='#' id='deselect-all'>Deselect All</a>
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    <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>