jquery - Wie zum entfernen einer ausgewählten option html wählen?

Meine eigentliche Frage ist ziemlich wenig kompliziert im Vergleich zu seinem Titel. Ich bin sehr neu in javascript und jquery also bitte Geduld mit mir.

Ich würde sugest Sie diesen code ausführen, den ersten, bevor Sie das Lesen meiner Frage, so können Sie verstehen, was ich versuche zu tun.

<html>
<head>
<script type="text/javascript" src="jquery1.6.4min.js"></script>
<script type="text/javascript" > 
var selectedAddFootballPlayerId = '';
var selectedAddFootballPlayerName = '';
var selectedRemoveFootballPlayerId = '';
var selectedRemoveFootballPlayerName = '';

$(document).ready(function() {
 $('#listboxFootballPlayers option').click(function() {
  selectedAddFootballPlayerId = $(this).attr('value');
  selectedAddFootballPlayerName = $(this).text();
 });

 $('#selectedFootballPlayers option').click(function() {
  selectedRemoveFootballPlayerId = $(this).attr('value');
  selectedRemoveFootballPlayerName = $(this).text();
 });

 $('input#btnAddFootballPlayerToList').click(function() {
  if (selectedAddFootballPlayerId == '') {
   alert("Select a football player to be added from the list.");
  } else {
   var option = new Option(selectedAddFootballPlayerName , selectedAddFootballPlayerId);
   $(option).html(selectedAddFootballPlayerName); 
   $('#selectedFootballPlayers').append(option);
   selectedAddFootballPlayerId = '';
   selectedAddFootballPlayerName = '';
  }
 });

 $('input#btnRemoveFootballPlayerFromList').click(function() {
  if (selectedRemoveFootballPlayerId == '') {
   alert("Select a football player to be removed from the list.");
  } else {
   var option = new Option(selectedRemoveFootballPlayerName , selectedRemoveFootballPlayerId);
   $(option).html(selectedRemoveFootballPlayerName); 
   $('#listboxFootballPlayers').append(option);
   selectedRemoveFootballPlayerId = '';
   selectedRemoveFootballPlayerName = '';
  }
 });
});
</script>
</head>
<body>
<table>
 <tr>
  <td>
   <select id="listboxFootballPlayers" size="5" multiple="multiple" style="width: 200px;">
    <option value="l1">Cristiano Ronaldo</option>
    <option value="l2">Ricardo Kaka</option>
    <option value="l3">Lionel Messi</option>
    <option value="l4">Gerd Muller</option>
    <option value="l5">Johan Crujjf</option>
    <option value="l6">Franz Beckenbauer</option>
    <option value="l7">David Beckham</option>
   </select>
  </td>

  <td>
   <table>
    <tr><td><input type="button" id="btnAddFootballPlayerToList" value="->" /> </td></tr>
    <tr><td><input type="button" id="btnRemoveFootballPlayerFromList" value="<-" /></td></tr>
   </table>
  </td>

  <td>
   <select id="selectedFootballPlayers" size="5" multiple="multiple" style="width: 200px;"></select>
  </td>
 </tr>
 </table>
 </body>
 </html>

Bevor ich mit der Frage beginnen, bitte beachten:

#listboxFootballPlayers - Die listbox auf der linken Seite

#selectedFootballPlayers - Die listbox auf der rechten

Ich habe 2 Fragen:

1.) Wie kann ich die entfernen Sie das ausgewählte Element /option #listboxFootballPlayers nachdem ich klickte auf -> - Taste.

2.) Warum ist es so, dass wenn ich auf <- nachdem ich ein Element ausgewählt /option #selectedFootballPlayers es gibt mir eine Nachricht Select a football player to be removed from the list. Es scheint mir, dass es nicht weisen Sie den Wert auf die variable selectedRemoveFootballPlayerId.

Fragen Sie mich bitte, wenn es gibt etwas, das nicht klar mit meiner Frage. Bitte helfen Sie. Vielen Dank im Voraus.

Btw hier ist das jsfiddle link: http://jsfiddle.net/7vspM/

  • Du bekommst bessere Antworten, wenn Sie funktionierenden code in jsFiddle oder link zu einer Website, so dass wir don ' T haben so viel zu tun, eingeben
  • Anstatt zu versuchen, speichern Sie die ausgewählten Spieler in eine variable jedes mal, wenn eine option angeklickt ist, warum nimmst du nicht einfach die ausgewählte option aus select-box aus, wenn -> (oder < -) - Taste geklickt wird? Dies macht es einfacher, die erlauben würde, multi-Auswahl, Auswahl über die Tastatur anstelle der Maus, etc.
  • Ok ich werde versuchen jsfiddle. Es wird mein erstes mal.
  • Hier ist das jsfiddle. Hoffe, das hilft jsfiddle.net/7vspM
InformationsquelleAutor NinjaBoy | 2011-11-19
  1. 3
    $(document).ready(function() {
    $('#listboxFootballPlayers option').click(function() {
        selectedAddFootballPlayerId = $(this).attr('value');
        selectedAddFootballPlayerName = $(this).text();
    });
    $('#selectedFootballPlayers option').live('click',  //`live()` event for `option` bcoz, option in this select will  
                                                        //create after DOM ready
    function() {
        selectedRemoveFootballPlayerId = $(this).attr('value');
        selectedRemoveFootballPlayerName = $(this).text();
    });
    $('input#btnAddFootballPlayerToList').click(function() {
        if (selectedAddFootballPlayerId == '') {
            alert("Select a football player to be added from the list.");
        } else {
            var option = new Option(selectedAddFootballPlayerName, selectedAddFootballPlayerId);
            $(option).html(selectedAddFootballPlayerName);
            $('#selectedFootballPlayers').append(option);
            $('#listboxFootballPlayers option:selected').remove();  //remove selected option
            selectedAddFootballPlayerId = '';
            selectedAddFootballPlayerName = '';
        }
    });
    $('input#btnRemoveFootballPlayerFromList').click(function() {
        if (selectedRemoveFootballPlayerId == '') {
            alert("Select a football player to be removed from the list.");
        } else {
            var option = new Option(selectedRemoveFootballPlayerName, selectedRemoveFootballPlayerId);
            $(option).html(selectedRemoveFootballPlayerName);
            $('#selectedFootballPlayers option:selected').remove(); //remove selected option
            $('#listboxFootballPlayers').append(option);
            selectedRemoveFootballPlayerId = '';
            selectedRemoveFootballPlayerName = '';
        }
    });
});
    • Ich denke, das wird lösen alle Probleme
    • Vielen Dank, Mann. Dies hat mir sehr geholfen.
    InformationsquelleAutor thecodeparadox
  2. 1

    Bezug 2):

    Das problem ist, dass Sie zuweisen, die auf Funktionalität, bevor Sie das element anlegen zugewiesen. Wenn Sie Ihre option, die Sie zuordnen sollten es stattdessen so:

    $(option).click(function() {
 selectedRemoveFootballPlayerId = $(this).attr('value');
 selectedRemoveFootballPlayerName = $(this).text();
});
    InformationsquelleAutor Gil
  3. 1

    In Bezug auf die Frage,, ist es etwas einfacher, einfach verschieben Sie die ausgewählte option-element von einer Liste in die andere:

    $('#listboxFootballPlayers option:selected').appendTo('#selectedFootballPlayers');

    Habe ich auskommentiert, die Zeilen, die nicht benötigt werden in der JS Fiddle demo.

    Als für Ihre zweite Frage, ich habe umgeschrieben, die if/else Aussage:

    $('input#btnRemoveFootballPlayerFromList').click(function() {
    if (!$('#selectedFootballPlayers option:selected')){
        alert("First select a player to remove.");
    }
    else {
        $('#selectedFootballPlayers option:selected').appendTo('#listboxFootballPlayers ');
    }
});

    JS Fiddle demo.

    Referenzen:

    • Tanks a lot für die Beantwortung meiner ersten Frage....
    • Du bist willkommen, ich habe auch angesprochen, der zweite Teil nun in meinem edit.
    InformationsquelleAutor David Thomas
Schreibe einen Kommentar