如何在选择元素中使用输入元素？答案

【问题标题】：How to use input element in select element?如何在选择元素中使用输入元素？
【发布时间】：2018-06-23 21:21:08
【问题描述】：

我正在尝试将输入元素添加到选择元素中。我不起作用的代码如下所示；

<select size="<%= myCollection.length %>" id="functionList">               
    <% for(var i=0; i<myCollection.length; i++){ %>
        <option>
            <input class="myInput" id="<%= i %>" name="<%= myCollection[i].name %>"></input>
        </option>
    <% } %>
</select>

【问题讨论】：

这不是有效的 HTML。
这是你的完整代码吗？
@Barmar 这显然是一个模板
抱歉，选择元素中不能有输入元素。
@AnteJablanAdamović 我的意思是它生成的 HTML 无效，因为您不能在选项内输入。

标签： javascript html select input

【解决方案1】：

正如 cmets 中所指出的，在 option 中包含 input 不是有效的 HTML。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option

因此，您将无法使用现有的 HTML 组件来做到这一点——您需要创建自己的自定义组件并将其设置为看起来像带有输入选项的下拉菜单。

我也会考虑该组件的用户体验和可访问性。

【讨论】：