Jak usunąć opcję <select> po wybraniu jQuery?

Question

Próbuję zrobić tak, że po wybraniu opcji rozwijanej zostanie ona usunięta z menu, a gdy zostanie wybrana inna, poprzednia usunięta opcja zostanie zwrócona do menu. Czy istnieje sposób, aby to zrobić za pomocą jQuery?

Jestem nowy w jQuery i JavaScript, więc nie jestem zbyt pewny, co robię, a wszystkie moje pogaduszki mają tylko dalszy złamany kod. Dzięki!

Dla porównania, to co wygląda jak mój HTML:

<div class="FlightList"> 
        <select id="departureFlightsControl"> 
         <option value="default">No flight chosen</option> 
         <option value="20121113 17:37:00">November 13, 2012 (5:37pm) - $137.38</option> 
         <option value="20121119 05:11:00">November 19, 2012 (5:11am) - $121.05</option> 
         <option value="20121124 19:41:00">November 24, 2012 (7:41pm) - $182.44</option> 
         <option value="20121208 08:22:00">December 8, 2012 (8:22am) - $140.75</option> 

i tak dalej, z większą liczbą opcji. Po wybraniu opcji innej niż domyślna jest ona umieszczana w dziale "informacje o locie", mającym mały "X" div "przycisk", aby ją wyczyścić. Chcę, aby przycisk X zwrócił go do listy.

Answer 1

Można to wykorzystać jako bazę:

<div class="FlightList"> 
    <select id="departureFlightsControl" onchange="addToInfo(this)"> 
     <option value="default" >No flight chosen</option> 
     <option value="20121113 17:37:00">November 13, 2012 (5:37pm) - $137.38</option> 
     <option value="20121119 05:11:00">November 19, 2012 (5:11am) - $121.05</option> 
     <option value="20121124 19:41:00">November 24, 2012 (7:41pm) - $182.44</option> 
     <option value="20121208 08:22:00">December 8, 2012 (8:22am) - $140.75</option> 
    </select> 
</div> 
<div id="flightInformation">  

</div> 
<script type="text/javascript"> 
function addToInfo(element){ 
    var opt = $(element).find(":selected").remove(); 
    var span = $('<span style="margin-left:20px;" onclick="addToList(this)"> X</span>'); 
    $(span).data('option', opt); 
    var div = $('<div>'+$(opt).html()+'</div>') 
    $(div).append(span); 
    $('#flightInformation').append(div); 
} 

function addToList(element){ 
    $('#departureFlightsControl').append($(element).data('option')); 
    $(element).closest('div').remove(); 
} 
</script> 

Answer 2

Oto rozsądne rozwiązanie, które utrzymuje ją proste i spełnia swoje zadanie. Możesz oczywiście zwiększyć specyficzność funkcji, jeśli chcesz.

$(document).ready(function() { 
    var temp = 0; 
    if ($(':selected')) { 
     $('select').change(function() { 
      if (temp !== 0) { 
       temp.show(); 
      } 
      temp = $(':selected').hide(); 
      return temp; 
     }); 
    } else { 
     ('select').show(); 
    } 
}); 

Answer 3

Wpadłem na skrypt, który działał w porządku, przynajmniej w Firefoksie. Problem z tym w Firefoksie polegał na tym, że zdarzenie change nie uruchamia się, dopóki nie opuścisz formantu (a może w innych przeglądarkach), a zdarzenie click pojawia się po rozwinięciu listy rozwijanej, a nie tylko podczas wybierania. To spowodowało, że bardzo trudno było zsynchronizować i nie usunąć pozycji "brak lotu" z listy, dopóki nie zostanie wybrany prawdziwy lot.

Zrobiłem więc trochę badań w tej sprawie, a następnie spróbowałem opracować my own jQuery plugin (jsFiddle) do wykrywania listy rozwijanej i zbiorczego wyboru. To dostaje lepiej, ale nadal nie działa idealnie w Firefoksie.

Moja konkluzja jest taka, że ​​podczas gdy można dostać takiego zwierzęcia głównie działa, nie można dostać się wokół kilku rzeczy:

• nie wszystkie przeglądarki wdrażają rzeczy w ten sam sposób, więc „break” różnie.
• W przeglądarce Firefox po kliknięciu poza ramką iframe z rozwijaną kontrolką wyboru rozwijane jest menu rozwijane i istnieje nic, co można zrobić, aby na nie odpowiedzieć. Teraz kod zgłasza nieprawidłowe zdarzenie, dopóki nie opuścisz kontrolki lub nie klikniesz w innym miejscu na stronie.
• Firefox dodatkowo rzucił błędy skryptu w bibliotece jQuery, ale nie Chrome.
• pomocą skrótów klawiaturowych, takich jak Alt↓ pop otworzyć rozwijaną nie rzucać zdarzeń myszy, przynajmniej w Firefoksie. Więc musisz dodać jeszcze więcej zalewek zdarzeń na klawiaturze (i jesteś pewien, że otrzymasz to poprawnie na Macu? Android? IPhone?)

Uwaga: jestem świadomy, że mój kod w tym skrzypcach nie jest optymalny i ma błędy. Jest to porzucony prototyp, a nie gotowy produkt.:)

Czy mogę zamiast tego zasugerować, aby użyć niestandardowego pola wyboru, które może zrobić wszystko, co chcesz. Oto one example select box replacement jQuery plugin.

Answer 4

Oto rozwiązanie, które buforuje wszystkie opcje podczas ładowania strony. Gdy opcja jest zaznaczona, opcje są zastępowane z pamięci podręcznej ze wszystkich opcji, których wartości nie są tylko jeden wybrany

var departSelect=$('#departureFlightsControl'); 
/* cache clones of all options*/ 
var departOptions=departSelect.find('option').clone(); 

departSelect.change(function(){ 
    var currVal=$(this).val(); 

    /* other display logic using currVal*/ 


    /* get new options that don't include current one selected from cache*/ 
    var newOptions= departOptions.clone().filter(function(){ 
     return $(this).val() ! = currVal; 
    }); 

    $(this).html(newOptions) 

})