问题描述
我试图从数据列表中隐藏一个选项(我不是试图隐藏用户输入)。我尝试添加隐藏属性,但它仍然显示在下拉列表中。还显示:无似乎不起作用。我可以使用 javascript/jquery。隐藏选择选项的工作方式如下:
mySelect.find('option[value='+something+']').prop('selected',false).hide()
<input list="test">
<datalist id="test">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome" hidden>
<option value="Opera">
<option value="Safari">
</datalist>
<input list="a">
<datalist id="a">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome" style="display:none;">
<option value="Opera">
<option value="Safari">
</datalist>
解决方法
可以使用
<option>
属性从列表中省略 disabled
。
document.getElementById('toggle').addEventListener('change',(e) => {
let opt = document.querySelector('option[value=Chrome]')
opt.toggleAttribute('disabled',e.target.checked)
})
<input list="test" />
<datalist id="test">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome" disabled>
<option value="Opera">
<option value="Safari">
</datalist>
<label>
<input checked type="checkbox" id="toggle" />
disable Chrome
<labe>