Hoffe euch allen geht es gut und es geht euch gut.

Ich verwende Multi-Select-Bootstrap-Dropdown-Abfrage. Ich benutze asp.net Core, um Listbox zu füllen, es funktioniert gut für die Auswahl, alle auswählen usw.

Aber ich möchte, dass, wenn ich ein Element aus Dropdown A auswähle, dieses Element aus dropdown B entfernt werden muss und wenn ich das Element aus Dropdown A abwähle, muss es in Dropdown B hinzugefügt / angezeigt werden. Und Vice Virsa auch, wenn Element in Dropdown B ausgewählt wurde, dann wurde dieses Element aus Dropdown A entfernt, und wenn alle aus Dropdown A ausgewählt wurden, wurden alle Elemente aus Dropdown B entfernt und Vice Virsa ebenfalls. Hoffe du verstehst Leute.

Zum Beispiel: Wenn A-, B-, C-, D-Werte in Dropdown-Liste A und wenn ich A auswähle, muss es deaktiviert oder vor DropdownB ausgeblendet werden. Wenn ich alle auswähle, muss alles aus DropdownB entfernt werden, und auch Vice Virsa für DropdownB. Note: DropdownA and DropdownB both have same number of values/elements,same text ,same value,

Aussicht

@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;
    }
0
Fawad Khan 15 Aug. 2020 im 18:12

2 Antworten

Beste Antwort

Hier ist eine funktionierende Demo wie folgt:

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

Mein Testmodell:

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

Mein Testcontroller:

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

Ergebnis: Bildbeschreibung hier eingeben

1
Rena 17 Aug. 2020 im 06:38

Es scheint, dass Sie die Mehrfachauswahl von Bootstrap verwenden. In der Dokumentation sehen wir, dass Sie Daten wie folgt konfigurieren können (nachdem Sie .multiselect für eine bestimmte Eingabe ausgeführt haben, wie Sie es in Ihrem Beispiel tun):

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

Fügen Sie nun das Ereignis 'onchange' von #PlayersTeamA hinzu und aktualisieren Sie die verfügbaren Daten für #PlayersTeamB, beispielsweise wie folgt:

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

Sie müssen sich auch an den Austausch von #PlayersTeamB anhängen, glaube ich (damit es in beide Richtungen funktioniert).

0
Marek Piotrowski 15 Aug. 2020 im 17:33