HTML datalist 从列表中隐藏选项答案

【问题标题】：HTML datalist hide option from listHTML datalist 从列表中隐藏选项
【发布时间】：2020-12-19 17:25:39
【问题描述】：

我试图从数据列表中隐藏一个选项（我不是试图隐藏用户输入）。我尝试添加隐藏属性，但它仍然显示在下拉列表中。还显示：没有似乎不起作用。我可以使用 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>

【问题讨论】：

标签： javascript html datalist

【解决方案1】：

<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>

【讨论】：