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();