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

问题描述

希望大家一切都好，一切顺利。

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

但是我希望当我从"stub0"中选择元素时，必须从Dropdown A中删除该元素，并且如果我从下拉列表A中取消选择元素，则必须在dropdownB中添加/显示它。同样，如果从下拉列表B中选择了元素，则从dropdownA中删除了该元素；如果从dropdownA中选择了全部，则还将所有元素从dropdownB中删除了。 希望你能理解你们。

例如：如果dropdownlistA中的A，B，C，D值并且如果我选择A，则它必须被禁用或从dropdownB隐藏，如果我选择全部，则必须从dropdownB中删除所有内容，并且也将dropdownB删除好， dropdown B

查看

Note: DropdownA and DropdownB both have same number of values/elements,same text,same value,

解决方法

这是一个工作示例，如下所示：

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

结果：

,

似乎您正在使用引导程序的多选。在文档中，我们可以看到您可以按以下方式配置数据（在特定输入上执行.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（这样它才能双向使用）。