Come rimuovo l'opzione una volta scelta con jQuery?

Question

Sto provando a fare in modo che una volta selezionata l'opzione a discesa, verrà rimosso dal menu e quindi, una volta selezionata l'altra, l'opzione precedente rimossa verrà restituita al menu. C'è un modo per farlo usando jQuery?

Sono nuovo di jQuery e JavaScript, quindi non sono troppo sicuro di quello che sto facendo, e tutto il mio spicciolo ha solo un ulteriore codice rotto. Grazie!

Per avere un riferimento, questo è ciò che il mio HTML assomiglia:

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

e così via, con più opzioni. Una volta selezionata un'opzione diversa da quella predefinita, viene popolata in un div "informazioni di volo", che ha un piccolo "pulsante" div "X" per cancellarlo. Voglio il pulsante X per restituirlo alla lista.

Answer 1

È possibile utilizzare questo come punto di partenza:

<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

Ecco una soluzione ragionevole che mantiene semplice e fa il lavoro. Ovviamente puoi aumentare la specificità della funzione se desideri.

$(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

mi si avvicinò con script che ha lavorato sorta di ok, almeno in Firefox. Il problema con Firefox era che l'evento change non si attiva finché non si lascia il controllo (e forse anche in altri browser) e l'evento click si verifica quando si estrae il menu a discesa, non solo quando si effettua una selezione. Ciò ha reso molto difficile sincronizzare e non rimuovere la voce "nessun volo scelto" dalla lista fino a quando non è stato scelto un volo reale.

Quindi, ho fatto un po 'di ricerche sul problema e poi ho provato a lavorare su my own jQuery plugin (jsFiddle) per rilevare il menu a tendina e il rollup. Ottiene meglio, ma ancora non funziona perfettamente in Firefox.

La mia conclusione è che mentre è possibile ottenere un tale animale principalmente di lavoro, non si può andare in giro un paio di cose:

• Non tutti i browser implementano le cose allo stesso modo, in modo da "rompere" in modo diverso.
• In Firefox, se si fa clic su un iframe che contiene un controllo di selezione è sceso verso il basso, la discesa si arrotola e non c'è nulla di si può fare per rispondere ad esso. Così ora il codice riporta l'evento sbagliato per un po 'finché non lasci il controllo o fai clic altrove nella pagina.
• Firefox ha inoltre lanciato errori di script nella libreria jQuery, ma non in Chrome.
• utilizzando le scorciatoie da tastiera come Alt↓ al pop aprire l'elenco a discesa non gettare eventi del mouse, almeno in Firefox. Quindi dovreste aggiungere ancora più cattura di eventi di tastiera (e sei sicuro che ti ottenere questo diritto su Mac Android iPhone???)

Nota: Sono consapevole che il mio codice in quel violino non è ottimale e ha bug. È un prototipo abbandonato, non un prodotto finito.:)

Quindi, posso suggerire invece di utilizzare una casella di selezione personalizzata, che può fare più tutto ciò che vuoi. Ecco one example select box replacement jQuery plugin.

Answer 4

Ecco una soluzione che memorizza nella cache tutte le opzioni al caricamento della pagina. Quando si seleziona l'opzione, le opzioni vengono sostituiti dalla cache con tutte le opzioni i cui valori non sono quello appena selezionato

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) 

})