jquery - selectで選択した要素をどのように非表示にしますか?

Question

選択で選択した要素を非表示にするにはどうすればよいですか?

写真を参照してください:

写真1

写真2

これどうやってするの？

Answer 1

これには JavaScript は必要ありませんが、CSS は 1 行だけです。

option:checked { display: none; }

デモ：

http://jsfiddle.net/kJckW/2/

Answer 2

これはすべて、マークアップに依存します。

$("#select_id option[value='foo']").remove();

ここにjsfiddleがあります。

Answer 3

マークアップやコードを投稿していませんが、いくつか作成します。

<select id="shirts">
   <option>blue shirt</option>
</select>

$("#shirts").on('change', function () {
   //Remove the hidden input and restore the removed value
   if ($("#trueshirt").length) {
      $(this).append("<option>" + $("#trueshirt").val() + "</option>");
      $("#trueshirt").remove();
   }

   //get the selected value
   var val = $(this).val();

   //Remove the option as requested (simply hiding it is incompatible with
   //some browsers)
   $("option:selected", this).remove();

   //Create hidden input to keep the value
   $("<input>").val(val).attr({'type': 'hidden', 'name': 'shirt', id: 'trueshirt'})
      .insertAfter(this);
});