私はこのような選択リストを持っています:
<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では動作しません。
非表示にするには、spanタグで囲みます。
$( "#selectlist option[value=4]" ).wrap( "<span>" );
表示するには、スパンタグがある場合は、ラップを解除します。
if ( $( "#selectlist option[value=4]" ).parent().is( "span" ) ){
$( "#selectlist option[value=4]" ).unwrap();
}
cSSを使用してオプションを非表示にすることはIEではサポートされていないため、option
sリスト自体を更新する必要があります。
のようなものを試してください
$('#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()
デモ: フィドル
OK、私は数時間検索したところ、すべてのブラウザなどにNO WORKING WAYが "非表示"(つまり、オプションがドロップダウンリストから一時的に非表示になる)になっていることに気付きました。可視性を非表示にするか、style = "display:none"に設定します。
私の最終的なアプローチは次のとおりです。1.ドロップダウンリストのすべてのオプションを格納する配列を作成します。 2.メソッドを使用して、表示する内容に応じてドロップダウンリストを動的に更新します。
ライブラリを使用せずにドロップダウンリストを使用する場合は、これで完了です。
スクリプトに次の行を含めると、オプションを非表示にできます。
$("#selectlist option[value='4']").hide();
そして、このオプションを再び表示したい場合は、次の行を使用します。
$("#selectlist option[value='4']").show();
オプションを非表示の選択要素またはキャッシュされたドキュメントフラグメントに移動してオプションを「非表示」にし、表示したいときに元に戻すことができます。
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');
">
もちろん、コードはすべて再生されますが、いくつかのアイデアが得られるはずです。多くのオプションを保存したい場合は、それらを参照する方法が必要になるため、何らかの形で参照スキーマを使用してオブジェクトに保存することができます。
このリンクを参照してください
<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を作成し、スタイルで非表示にする
あなたもJQueryを使用していると思います。
$("#selectlist option[value='option4']").remove();
選択リストからいくつかのオプションを削除したい場合は、次のコードを使用できます。
<script type="text/javascript">
$(window).bind("load", function() {
$('#select_list_id option[value="AB"],option[value="SK"]').remove();
});
</script>
Javaスクリプトを使用して、オプションのリストの下に子を追加します。
`var option = document.createElement("option");
option.text = "All Users";
option.value = "all_user";
var select = document.getElementById("log_user_type");
select.appendChild(option);`
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>
チェック デモ