js控制select下拉框--動態隱藏,展示option
阿新 • • 發佈:2019-02-18
如上圖,下拉框中有六個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();