html - 如何禁用 Datalist 上的选项

Question

如何禁用 Datalist 中的选项？

<input type="hidden" name="Town_Group" id="frmTown_Group">
<input name="Town" id="frmTown" list="frmTown_List">
<datalist name="Town_List" id="frmTown_List">
<option value="London">London</option>
<option value="Zurich">Zurich</option>
<option value="|" disabled=true >Italian</option>
<option value="Turin">Turin</option>
<option value="Milan">Milan</option>
<option value="Rome">Rome</option>
<option value="Naples">Naples</option>
<option value="|" disabled=true >French</option>
<option value="Bordeaux">Bordeaux</option>
<option value="Lion">Lion</option>
<option value="Paris">Paris</option>
</datalist>

我尝试禁用，效果是该选项消失了。

感谢乔瓦尼·罗萨蒂

Answer 1

在这种情况下，您可以使用这样的只读属性，我不会推荐这个

<input type="hidden" name="Town_Group" id="frmTown_Group" />
<input name="Town" id="frmTown" list="frmTown_List" />
<datalist name="Town_List" id="frmTown_List">
  <option value="London">London</option>
  <option value="Zurich">Zurich</option>
  <option value=" " readonly>Italian</option>
  <option value="Turin">Turin</option>
  <option value="Milan">Milan</option>
  <option value="Rome">Rome</option>
  <option value="Naples">Naples</option>
  <option value=" " readonly>French</option>
  <option value="Bordeaux">Bordeaux</option>
  <option value="Lion">Lion</option>
  <option value="Paris">Paris</option>
</datalist>

这是唯一的方法，因为

数据列表与选择:

我想这就是你想要的，但没有可比性。数据列表
不同，选择不同。

datalist 用于从列表中自动填充结果，基于
用户输入，而 select 没有任何作用，它只是显示所有
它有选项。

所以这清楚地表明不应该有任何预选值
数据列表(因为它用于在用户交互时自动填充)。因此
它不能是只读的

select 另一方面是不同的，它可以有一个默认值，因此
它可以是只读的。

是的，您说的是:“如果您希望只读或禁用，则使用选择标签”，是的，据我所知，这是真的，因为您无法将任何内容设置为在数据列表中选择，但您可以选择。