如何解决HTML datalist 从列表中隐藏选项
我试图从数据列表中隐藏一个选项(我不是试图隐藏用户输入)。我尝试添加隐藏属性,但它仍然显示在下拉列表中。还显示:无似乎不起作用。我可以使用 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。