web-dev-qa-db-ja.com

選択リストから選択オプションを削除/非表示にする方法

私はこのような選択リストを持っています：

<select id="selectlist" name="selectproduct" >
    <option value=""> --- Select product  --- </option>
    <option value="1">Product 1</option>
    <option value="2">Product 2</option>
    <option value="3">Product 3</option>
    <option value="4">Product 4</option>
</select>

残念ながら編集できません。デフォルトで「Product 4」オプションを非表示にする方法はありますか？ CSSを試していますが、IEでは動作しません。

javascriptselecthideoption
11
user2132234

非表示にするには、spanタグで囲みます。

$( "#selectlist option[value=4]" ).wrap( "<span>" );

表示するには、スパンタグがある場合は、ラップを解除します。

if ( $( "#selectlist option[value=4]" ).parent().is( "span" ) ){
    $( "#selectlist option[value=4]" ).unwrap();
}
10
walterquez

cSSを使用してオプションを非表示にすることはIEではサポートされていないため、optionsリスト自体を更新する必要があります。

のようなものを試してください

$('#selectlist option[value=4]').remove();

デモ： フィドル

または後で有効にしたい場合

var sel = $('#selectlist');
var opts = sel.find('option');

$(':checkbox').click(function(){
    sel.empty().append(this.checked ? opts : opts.filter('[value!=4]'));
}).click()

デモ： フィドル

5
Arun P Johny

時間を節約するために、次の回答をお読みください。

OK、私は数時間検索したところ、すべてのブラウザなどにNO WORKING WAYが "非表示"（つまり、オプションがドロップダウンリストから一時的に非表示になる）になっていることに気付きました。可視性を非表示にするか、style = "display：none"に設定します。

私の最終的なアプローチは次のとおりです。1.ドロップダウンリストのすべてのオプションを格納する配列を作成します。 2.メソッドを使用して、表示する内容に応じてドロップダウンリストを動的に更新します。

ライブラリを使用せずにドロップダウンリストを使用する場合は、これで完了です。

2
johnnyman

スクリプトに次の行を含めると、オプションを非表示にできます。

    $("#selectlist option[value='4']").hide();

そして、このオプションを再び表示したい場合は、次の行を使用します。

   $("#selectlist option[value='4']").show();
2
sandeepghuge141

オプションを非表示の選択要素またはキャッシュされたドキュメントフラグメントに移動してオプションを「非表示」にし、表示したいときに元に戻すことができます。

var selectTool = (function() {
  var frag = document.createDocumentFragment();
  return {
    hideOpt: function (selectId, optIndex) {
      var sel = document.getElementById(selectId);
      var opt = sel && sel[optIndex];
      console.log(opt);

      if (opt) {
        frag.appendChild(opt);
      }
    },

    showOpt: function (selectId) {
      var sel = document.getElementById(selectId);
      var opt = frag.firstChild;
      if (sel && opt) {
        sel.appendChild(opt);
      }
    }
  }
}());

次に、次のように4番目のオプションを非表示にします。

<input type="button" value="Hide option" onclick="
  selectTool.hideOpt('selectlist',4);
">

そしてそれを使ってそれをもう一度見せます：

<input type="button" value="Show option" onclick="
  selectTool.showOpt('selectlist');
">

もちろん、コードはすべて再生されますが、いくつかのアイデアが得られるはずです。多くのオプションを保存したい場合は、それらを参照する方法が必要になるため、何らかの形で参照スキーマを使用してオブジェクトに保存することができます。

1
RobG

このリンクを参照してください

http://jsfiddle.net/DKKMN/

<select id="selectlist" name="selectproduct" >
 <option value=""> --- Select product  --- </option>
 <option value="1">Product 1</option>
 <option value="2">Product 2</option>
 <option value="3">Product 3</option>
 <option value="4" id="i">Product 4</option>
</select>


#i{display:none;}

iDを作成し、スタイルで非表示にする

0
user2028750

あなたもJQueryを使用していると思います。

$("#selectlist option[value='option4']").remove();
0
sla55er

選択リストからいくつかのオプションを削除したい場合は、次のコードを使用できます。

<script type="text/javascript">
    $(window).bind("load", function() {    
        $('#select_list_id option[value="AB"],option[value="SK"]').remove();
    });
</script>
0
sandeep kumar

Javaスクリプトを使用して、オプションのリストの下に子を追加します。

`var option = document.createElement("option");
 option.text = "All Users";
 option.value = "all_user";
 var select = document.getElementById("log_user_type");
 select.appendChild(option);`
0
sandeepghuge141

Disabled属性でそのオプションを無効にしてみてください。

<select id="selectlist" name="selectproduct" >
 <option value=""> --- Select product  --- </option>
 <option value="1">Product 1</option>
 <option value="2">Product 2</option>
 <option value="3">Product 3</option>
 <option value="4" disabled="disabled">Product 4</option>
</select>

チェック デモ

0
Chirag Vidani