我必须在数据表上点击3次来选择项目

Question

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

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

当我说我点击时，我点击的是单词的最后一个字母之后!

这正常吗?有办法绕过这个吗?

Thanks a lot

Answer 1

这个方法有几个问题

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

希望对你有帮助。