如何在表单select下拉选单最后添加可输入自定义内容的文本框选项

原生 <select> 标签不支持直接在选项中嵌入输入框，我们可以通过「下拉选项+隐藏输入框联动」的方式实现需求，具体步骤如下：

1. 修改前端HTML代码 #

在原有下拉选单的基础上新增「自定义」选项，同时添加默认隐藏的文本输入框，供用户填写自定义分类：

<div class="form-group">
  <label for="postCategory">分类</label>
  <select class="form-control" id="categorySelect" name="category">
        <option value="1" selected disabled>请选择分类</option>
        <option value="general">通用</option>
        <option value="tech">科技</option>
        <!-- 新增自定义选项 -->
        <option value="custom">其他（自定义分类）</option>
  </select>
  <!-- 新增自定义输入框，默认隐藏 -->
  <input type="text" class="form-control mt-2" id="customCategory" name="customCategory" placeholder="请输入自定义分类" style="display: none;">
</div>

2. 添加JS交互逻辑 #

监听下拉选单的选中状态，动态控制自定义输入框的显隐，也可以补充表单提交校验避免用户选了自定义但未填写内容：

// 监听下拉选单变化
const categorySelect = document.getElementById('categorySelect');
const customCategoryInput = document.getElementById('customCategory');

categorySelect.addEventListener('change', function() {
  // 选中自定义选项时显示输入框，否则隐藏
  if (this.value === 'custom') {
    customCategoryInput.style.display = 'block';
    // 可以设置输入框为必填
    customCategoryInput.required = true;
  } else {
    customCategoryInput.style.display = 'none';
    customCategoryInput.required = false;
  }
});

// 可选：表单提交前校验
document.querySelector('form').addEventListener('submit', function(e) {
  if (categorySelect.value === 'custom' && !customCategoryInput.value.trim()) {
    alert('请输入自定义分类内容');
    e.preventDefault();
  }
});

3. 调整后端接收逻辑 #

后端只需要先判断下拉选单的取值，如果是自定义选项就取输入框的内容即可，不需要改动原有提交路径：

app.post('/compose', function(req, res) {
  let category;
  if (req.body.category === 'custom') {
    // 取用户输入的自定义分类，注意做好敏感内容过滤和长度校验
    category = req.body.customCategory?.trim() || '默认分类';
  } else {
    // 取预设的分类值
    category = req.body.category;
  }
  console.log(category);
  // 后续业务逻辑...
});

注意：使用前请确认你的express服务已经配置了body-parser中间件，否则无法正常解析表单提交的参数。

内容的提问来源于stack exchange，提问作者Joy Karmoker