1. 程式人生 > >js控制select下拉框--動態隱藏,展示option

js控制select下拉框--動態隱藏,展示option

如上圖,下拉框中有六個option,如果想隱藏option我們該怎麼辦呢?(先拿chosen多選做示範)

只需要使用js找到對應的option,然後新增上 style->display:none即可

//遍歷所有option,加上display屬性

$('#form-field-select-4 option').each(function(){this.style='display:none'}); 

//chosen更新下拉框

$('#form-field-select-4').trigger("chosen:updated"); 


這樣以來,就會發現下拉框中所有option都加上了display屬性,下拉無結果


如需再次顯示,只需要將display設定為list-item即可

$('#form-field-select-4 option').each(function(){this.style='display:list-item'});

$('#form-field-select-4').trigger("chosen:updated");


如需取消選中,清空重置,id選擇器找到對應下拉框,設定val為''即可

$("#form-field-select-4").val("");
$('#form-field-select-4').trigger("chosen:updated");
如果有多個下拉框,將id選擇器改為類選擇。


正常的select,忽略掉chosen的update即可。

刪除全部option

$('#form-field-select-4 option').remove();