我想自定义数据列表下拉列表的显示方式。我现在有以下数据列表
<input type="text" id="employee" list="employee">
<datalist id="employee">
<option value="John Doe">John Doe (ID: 1)</option>
<option value="Jane Doe">Jane Doe (ID: 2)</option>
<option value="John Jane">John Jane (ID: 3)</option>
</datalist>
当我在输入框上打字时,我看到这样的输出
但是我的要求是让它看起来像下面这样
选择下拉列表时,只应选择名称(不选择 ID)。像这样:
我该怎么做?基本上我想在下拉列表中显示更多详细信息,但只选择名称而不是 Id 来提交表单。另外,我不希望下拉列表中有 2 列(较深和较浅)。我只想要更多信息的值(value)。
这是 JSFiddle我用它来回答这个问题。
附言- 我根据文本字段中的用户输入从 Ajax 调用动态生成此数据列表。另外,我不能使用 jquery 来操作任何东西。它必须是 native javascript。
最佳答案
出现第二列是因为您将内容放在开始和结束标记之间。 变化:
<option value="John Doe">John Doe (ID: 1)</option>
到:
<option value="John Doe"></option>
删除第二列。
这可以在通过 AJAX 调用接收数据时完成,只需在 JavaScript 中创建选项:
var option = document.createElement("option");
option.value = name + " (ID: " + id + ")";
document.getElementById("my-datalist").appendChild(option);
上面的代码将生成一列,但是,它在值字段中包含 ID。如果您不希望它与表单一起提交,则必须在提交之前将其删除。或者您可以有两列,一列用于名称(值属性),一列用于 ID(文本内容)。
有关更多信息,请参阅此 link.
关于javascript - 自定义 html 数据列表下拉列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29885551/