<select>オプションをjQueryを使用して選択したら、それを削除するにはどうすればよいですか？

Question

ドロップダウンオプションが選択されると、それはメニューから削除され、次に別のものが選択されると、以前に削除されたオプションがメニューに返されるようにしています。 jQueryを使ってこれを行う方法はありますか？

私はjQueryとJavaScriptを使い慣れていないので、私は何をやっているのか分かりません。ありがとう！参考のため

、これは私の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> 

と。デフォルト以外のオプションが選択されると、それを消去するための小さな "X" div "button"を持つ "flight information" divに入力されます。私はXボタンをリストに戻したい。

Answer 1

あなたはベースとしてこれを使用することができます：

<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

ここではそれをシンプルに保ち、仕事をして、合理的な解決策です。あなたが望むなら、明らかに機能の特異性を高めることができます。

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

少なくともFirefoxではうまくいきました。 Firefoxの問題点は、コントロールを残すか（または他のブラウザでも）、changeイベントが発生せず、選択時だけでなくドロップダウンを引き出すときにclickイベントが発生するということでした。これにより、実際のフライトが選択されるまで、リストから「選択されたフライトなし」アイテムを同期化したり削除したりすることが非常に困難になりました。

そこで、私はこの問題に関する少しの調査を行い、ドロップダウンリストとロールアップの選択を検出するためにmy own jQuery plugin (jsFiddle)を解決しようとしました。それはをより良くになるが、それでもFirefoxでは完全には機能しない。

私の結論は、あなたがそのような動物ほとんど作業を取得することができながら、あなたはいくつかのことを回避することができないということです。

• すべてのブラウザは、物事を同じように実装するので、彼らは「休憩」ではありません異なっている。
• Firefoxの場合、ドロップダウンの選択コントロールを含むiframeをクリックすると、ドロップダウンがロールアップし、はありません。それに応答するにはがあります。だから、あなたがコントロールを離れるか、ページの他の場所をクリックするまで、コードは間違ったイベントをしばらく報告します。
• さらにFirefoxは、jQueryライブラリにスクリプトエラーを投げていましたが、Chromeは投げていませんでした。↓は、少なくともFirefoxで、マウスイベントをスローすることはありませんドロップダウンを開いてポップするなどAltキーとして
• 使うキーボードショートカット。したがって、キーボードイベントのトラップをさらに追加する必要があります（Androidの場合は、MacでもAndroidを入手できますか？）

注：私は自分のコードが最適ではなく、バグがあります。放棄されたプロトタイプであり、完成した製品ではありません。:)

代わりに、あなたが望むほとんどのことを行うことができるカスタム選択ボックスを使用することをお勧めします。ここにはone example select box replacement jQuery pluginがあります。

Answer 4

ページロード時にすべてのオプションをキャッシュするソリューションです。オプションを選択すると、キャッシュからオプションが選択された値以外のすべてのオプションに置き換えられます。

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) 

})