如何在多 select 引導下拉列表 jquery 中選擇 2 個下拉列表的基礎上添加/刪除列表中的元素？

Question

希望你們一切都好，一切都好。

我正在使用多 select 引導程序下拉 jquery。 我正在使用 asp.net 內核來填充列表框，它的工作正常，適合選擇，select 等等。

但我希望當我從Dropdown A中的 select 元素時，必須從dropdown B中刪除該元素，如果我從下拉 A 中取消選擇元素，則必須在下拉 B 中添加/顯示。 反之亦然，如果在下拉 B 中選擇了元素，則該元素從下拉 A 中刪除，如果 select 全部從下拉 A 中，則所有元素都從下拉 B 中刪除，反之亦然。 希望大家理解。

For example: If A,B,C,D values in dropdownlistA and if i select A then it must be disable or hide from dropdownB,if i select all then must remove all from dropdownB, and also vice virsa for dropdownB as well, 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

這是一個工作演示，如下所示：

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

我的測試 model：

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

我的測試 controller：

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

結果：

Answer 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 （以便它在兩個方向上都有效）。