如何在多选引导下拉 jquery 中选择 2 个下拉列表的基础上添加/删除列表中的元素？答案

【问题标题】：How to add/remove element in list on the basis of selection of 2 dropdown list in multi select bootstrap dropdown jquery?如何在多选引导下拉 jquery 中选择 2 个下拉列表的基础上添加/删除列表中的元素？
【发布时间】：2020-08-17 14:38:16
【问题描述】：

希望你们一切都好，一切顺利。

我正在使用多选引导下拉 jquery。我正在使用 asp.net 核心来填充列表框，它可以很好地进行选择、全选等。

但我希望当我从Dropdown A 中选择元素时，必须从dropdown B 中删除该元素，如果我从下拉列表 A 中取消选择元素，则必须在下拉列表 B 中添加/显示。反之亦然，如果在下拉列表 B 中选择了元素，则该元素从下拉列表 A 中删除，如果从下拉列表 A 中选择所有元素，则所有元素都从下拉列表 B 中删除，反之亦然。希望大家理解。

例如：如果下拉列表 A 中的 A、B、C、D 值，如果我选择 A，那么它必须从下拉列表 B 中禁用或隐藏，如果我选择全部，则必须从下拉列表 B 中删除所有，反之亦然，下拉列表 B 为出色地， Note: DropdownA and DropdownB both have same number of values/elements,same text ,same value,

查看

@section AddToHead{
<link rel="stylesheet" href="~/css1/bootstrap-3.1.1.min.css" type="text/css" />
<link rel="stylesheet" href="~/css1/bootstrap-multiselect.css" type="text/css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="~/js1/bootstrap-2.3.2.min.js"></script>
<script type="text/javascript" src="~/js1/bootstrap-multiselect.js"></script>
}
<form class="column" asp-controller="group"  asp-action="createresult" style="height:100%;" method="post">
  <span class="column" style="height:50px;">
        @Html.ListBoxFor(x => x.AvailablePlayers, Model.AvailablePlayers, new { id = "PlayersTeamA", onChange = "getSelectedOptions(this)", multiple = "multiple" })
        @Html.ValidationMessageFor(model => model.TeamOnePlayers)

    </span>
     <span class="column">
        @Html.ListBoxFor(x => x.AvailablePlayers, Model.AvailablePlayers, new { id = "PlayersTeamB", onChange = "getSelectedOptions(this)", multiple = "multiple" })
        @Html.ValidationMessageFor(model => model.TeamTwoPlayers)

    </span>

   </form>

    </div>
        @section Scripts {



<script type="text/javascript">
    $(function () {
        $('#PlayersTeamA').multiselect({
            includeSelectAllOption: true
        });
        $('#PlayersTeamB').multiselect({
            includeSelectAllOption: true
        });

      
    });

    function getSelectedOptions(sel) {
        var idddl = sel.id;
       
        var opts = [],
            opt;
        var len = sel.options.length;
        for (var i = 0; i < len; i++) {
            opt = sel.options[i];

            if (opt.selected) {
                opts.push(opt);
                var idul = sel.id;
                alert(idul);
                var ul = document.getElementById(idul);
                ul.removeChild(ul.childNodes[1]);



               
              

            }
        }

        return opts;
    }

【问题讨论】：

通过在另一个选择中“仅禁用”选项不是最简单的方法吗？
是的，请提供我禁用对我来说很好，我也尝试通过 id 获取下拉列表并删除子项，但它不起作用，我看到控制台调试器应用于代码并且看起来像

标签： javascript jquery asp.net-mvc asp.net-core bootstrap-multiselect

【解决方案1】：

这是一个如下所示的工作演示：

@model Players
<form class="column" asp-controller="group" asp-action="createresult" style="height:100%;" method="post">
<div id="A">
    <span class="column" style="height:50px;">
        @Html.ListBoxFor(x => x.AvailablePlayers, Model.AvailablePlayers, new { id = "PlayersTeamA", multiple = "multiple" })
    </span>
</div>  
<div id="B">
    <span class="column">
        @Html.ListBoxFor(x => x.AvailablePlayers, Model.AvailablePlayers, new { id = "PlayersTeamB", multiple = "multiple" })
    </span>
</div>
</form>

@section Scripts {
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css"/>
    <script>
        $(function () {
            $('#PlayersTeamA').multiselect({
                includeSelectAllOption: true   
            });
            $('#PlayersTeamB').multiselect({
                includeSelectAllOption: true
            });
        });

        var data = [];
        $('#B option').each(function (index, item) {
            data.push({ label: this.label, value: this.value });
        });

        $("#PlayersTeamA").change(function () {
            var selectedText = $('#PlayersTeamA').val();
            var newData = data;

            selectedText.forEach(function (element, index, array) {
                newData = newData.filter(function (el) { return el.value != element; });
            });           
            $("#PlayersTeamB").multiselect('dataprovider', newData);
        });
    </script>
}

我的测试模型：

public class Players
{
    public SelectList AvailablePlayers { get; set; }
}
public class AvailablePlayer
{
    public int Id { get; set; }
    public string Name { get; set; }
}

我的测试控制器：

[HttpGet]
public async Task<IActionResult> Index()
{
    var player = new List<AvailablePlayer>()
    {
        new AvailablePlayer(){ Id=1,Name="aa"},
        new AvailablePlayer(){ Id=2,Name="bb"},
        new AvailablePlayer(){ Id=3,Name="cc"}
    };
    var model = new Players()
    {
        AvailablePlayers = new SelectList(player, "Id", "Name")
    };
    return View(model);
}

结果：

【讨论】：

【解决方案2】：

看来您正在使用引导程序的多选。在文档中，我们可以看到您可以按如下方式配置数据（在对特定输入执行 .multiselect 之后，就像您在示例中所做的那样）：

var data = [
    {label: "Messi", value: "Messi"},
    {label: "Ronaldo", value: "Ronaldo"}
];
$("#PlayersTeamA").multiselect('dataprovider', data);

现在，附加到#PlayersTeamA 的“onchange”事件并更新#PlayersTeamB 的可用数据，例如：

$("#PlayersTeamA").change(function () {
        var selectedText = $(this).find("option:selected").text();
        var newData = data.filter(function(el) { return el.value == selectedText; });
        $("#PlayersTeamB").multiselect('dataprovider', newData);
});

我相信，您还必须附加到 #PlayersTeamB 的 onchange（这样它就可以双向工作）。

【讨论】：