如何根据多 select bootstrap 下拉列表 jquery 中 2 个下拉列表的 selection 来 add/remove 列表中的元素？

Question

希望你们一切都好，做的好。

我正在使用多 select bootstrap 下拉菜单 jquery。我正在使用 asp.net 核心来填充列表框，它对 selection、select 所有等

工作正常

但我希望当我从 Dropdown A 中删除 select 元素时，必须从 dropdown B 中删除该元素，如果我从下拉列表 A 中取消 select 元素，则它下拉列表 B 中必须 added/show。反之亦然，如果元素 select 在下拉列表 B 中编辑，则此元素从 dropdownA 中删除，如果 select 全部来自 dropdownA，则所有元素从 dropdownB 中删除，反之亦然。希望大家理解。

例如：如果 A、B、C、D 值在 dropdownlistA 中并且如果 i select A 则它必须被禁用或从 dropdownB 中隐藏，如果 i select all 则必须删除所有来自 dropdownB，也是 dropdownB 的反面， 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;
    }

Answer 1

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

Answer 2

这是一个像下面这样的工作演示：

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

结果：

如何根据多 select bootstrap 下拉列表 jquery 中 2 个下拉列表的 selection 来 add/remove 列表中的元素？

How to add/remove element in list on the basis of selection of 2 dropdown list in multi select bootstrap dropdown jquery?

javascript

asp.net-mvc

jquery

bootstrap-multiselect

asp.net-core