如何在select元素中使用input元素？附失效代码示例

嘿，你踩了HTML规范的坑啦！原生的<option>标签里是不能直接嵌套<input>元素的——<option>只能容纳纯文本或者像<span>这种轻量的文本级元素，直接塞输入框的话，浏览器要么直接忽略它，要么渲染得乱七八糟，这就是你代码跑不起来的核心原因。

根据你的需求，我整理了两种常用的替代方案，你可以按需选：

方案1：用<datalist>实现「可选择+可输入」的功能 #

如果你想要的是“既能选预设选项，又能手动输入内容”的效果，<datalist>是最贴合HTML规范的选择，代码改起来也简单：

<input list="functionList" name="selectedFunction" placeholder="选择或输入">
<datalist id="functionList">
  <% for(var i=0; i<myCollection.length; i++){ %>
    <option value="<%= myCollection[i].name %>" data-id="<%= i %>"></option>
  <% } %>
</datalist>

• 用户可以直接在输入框打字，也能点击下拉箭头选预设选项；
• 如果需要获取选中项的ID，加个JS监听输入框的input/change事件，从对应的<option>的data-id里拿就行。

方案2：自定义模拟下拉列表（完全自由定制） #

要是你真的需要每个选项里都有输入框（比如要给每个选项单独输入内容），那原生<select>肯定满足不了，不如自己用HTML+CSS+JS造一个：

<!-- 自定义下拉容器 -->
<div class="custom-select">
  <div class="select-trigger">点击展开选项</div>
  <div class="select-dropdown">
    <% for(var i=0; i<myCollection.length; i++){ %>
      <div class="dropdown-item">
        <input class="myInput" id="<%= i %>" name="<%= myCollection[i].name %>" placeholder="输入内容">
        <span class="item-label"><%= myCollection[i].name %></span>
      </div>
    <% } %>
  </div>
</div>

<!-- 基础样式 -->
<style>
.custom-select {
  position: relative;
  width: 240px;
  margin: 10px 0;
}
.select-trigger {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  background: #fff;
}
.select-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border: 1px solid #ddd;
  border-top: none;
  border-radius: 0 0 4px 4px;
  max-height: 250px;
  overflow-y: auto;
  background: #fff;
}
.custom-select.open .select-dropdown {
  display: block;
}
.dropdown-item {
  padding: 8px 10px;
  display: flex;
  gap: 8px;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
}
.dropdown-item:last-child {
  border-bottom: none;
}
.myInput {
  flex: 1;
  padding: 4px 6px;
  border: 1px solid #ddd;
  border-radius: 3px;
}
</style>

<!-- 交互逻辑 -->
<script>
const trigger = document.querySelector('.select-trigger');
const customSelect = document.querySelector('.custom-select');

trigger.addEventListener('click', () => {
  customSelect.classList.toggle('open');
});

// 点击外部关闭下拉
document.addEventListener('click', (e) => {
  if (!customSelect.contains(e.target)) {
    customSelect.classList.remove('open');
  }
});
</script>

• 这个方案完全由你掌控，想加输入框、按钮还是啥元素都可以，样式也能随便改；
• 交互逻辑也简单，点击触发按钮展开/收起，点击外部自动关闭，体验和原生下拉差不多。

原生<select>的<option>真的不支持嵌套输入框，别跟规范对着干啦～如果是基础的选+输需求，用<datalist>最省心；如果要复杂的选项结构，就自己写个自定义下拉，灵活度拉满！

内容的提问来源于stack exchange，提问作者MeseleŞuki