时间戳

首页 > 解决方案 > 我必须在 datalist 上单击 3 次才能选择项目

html - 我必须在 datalist 上单击 3 次才能选择项目

问题描述

我不知道这种行为是否正常......

<input list="options" onchange="console.log(this.value)" value="datalist"/>
<datalist id="options">
  <option value="1" >Foo</option>
  <option value="2">Bar</option>
  <option value="3">Foo</option>
</datalist>

<input id="test" value="test"/>

当您执行此代码时，第一个输入（使用 datalist ），您必须快速单击 3 次以选择单词“datalist”，但在第二个输入（普通输入）上，您必须单击它 2 次。

当我说我点击时，我点击单词的末尾，就在最后一个字母之后！

这个是正常的 ？有办法绕过这个吗？

非常感谢

标签： html

解决方案

嘿，所以这种方法有几个问题

<input list="options" onchange="console.log(this.value)" value="datalist"/>
<datalist id="options">
  <option value="1" >Foo</option>
  <option value="2">Bar</option>
  <option value="3">Foo</option>
</datalist>

<input id="test" value="test"/>

将值设置为 datalist 使 datalist 始终显示 datalist 并且不显示任何其他选项 做你想做的事情的最佳方法我认为是下拉选择只是使用 select 如下：

<select class="form-control" name="options" onselect="console.log(this.value)">
  <option value="1" >Foo</option>
  <option value="2">Bar</option>
  <option value="3">Foo</option>
</select>

希望这会有所帮助。

推荐阅读