javascript - 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>
s 可以使用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>
推荐阅读
- openiddict - 为所有 openiddict 路由指定 url 前缀
- c - 为什么 qemu 有时会比 ptrace 计数更多有时更少的指令?
- qt - 在 Qwt 图中使用一对一标签
- python - 如何在 2d 列表 python 中找到具有相同变量的值的总和,仅使用列表理解?
- haskell - 在模式匹配的不同情况下推导出不同的类型类约束
- javascript - 如何处理由崩溃导致的 404 页面返回。反应路由器
- swift - 停止在 UITableView 的嵌套 UICollectionView 中播放视频或仅在嵌套结构中的可见单元格上播放
- svelte - Svelte (rollup) - 错误:意外的令牌(请注意,您需要 @rollup/plugin-json 来导入 JSON 文件)
- datetime - 如果 yaxis 包含空 dateTime 数据并且 useUTC 为 false,则图表未呈现并引发脚本错误
- r - 在运行时为克隆的元素创建 R 闪亮绑定?