Bootstrap下拉按钮表单无法提交选中选项的技术求助

你的问题根源在于：当前使用的Bootstrap Dropdown只是纯UI组件，不是表单的可提交控件。表单提交时只会收集带有name属性的表单元素（比如<input>、<select>等），而你的dropdown没有关联这类元素，所以选中的选项值根本不会被发送到后端。

下面是具体的修复步骤和代码：

1. 给Dropdown添加隐藏表单输入 #

在dropdown容器内添加一个hidden类型的<input>，设置name="service-type"（和后端接收的字段名一致），用来存储选中的选项值：

<div class="col-sm-4">
  <div class="dropdown">
    <!-- 新增隐藏输入，用于提交选中的服务类型 -->
    <input type="hidden" name="service-type" id="service-type-input">
    <button class="btn btn-dropdown dropdown-toggle" type="button" id="service-type" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
      <span class="drp-name" data-bind="label">Choose</span>
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="service-type">
      <!-- 给每个选项添加data-value属性，方便获取对应值（可选，但更灵活） -->
      <li><a href="#" data-value="x1">x1</a></li>
      <li><a href="#" data-value="x2">x2</a></li>
      <li><a href="#" data-value="x3">x3</a></li>
    </ul>
  </div>
</div>

2. 修改JS代码，同步选中值到隐藏输入 #

更新你的JavaScript，点击dropdown选项时，不仅更新按钮显示的文本，还要把选中的值赋值给隐藏输入：

$(document.body).on('click', '.dropdown-menu li a', function(event) {
  event.preventDefault(); // 阻止a标签默认的跳转行为
  var $target = $(this);
  // 获取选中选项的值（从data-value取，或者直接取文本）
  var selectedValue = $target.data('value');
  var selectedText = $target.text();

  // 更新按钮显示的文本
  $target.closest('.dropdown')
    .find('[data-bind="label"]').text(selectedText)
    .end()
    .children('.dropdown-toggle').dropdown('toggle');
  
  // 把选中的值同步到隐藏输入，这样表单提交时会带上这个值
  $('#service-type-input').val(selectedValue);
});

3. 后端代码无需修改 #

你的PHP代码已经正确接收service-type字段，只要前端能把值传过来，就能正常获取并写入邮件内容。

为什么之前的代码无效？ #

你之前的JS只做了UI上的文本更新，但没有把选中的值和表单关联起来。表单提交时，浏览器只会收集有name属性的表单控件数据，没有这个属性的元素（比如你的dropdown按钮和列表）不会被包含在请求里，所以后端$_REQUEST['service-type']自然是空的。

如果不需要区分显示文本和提交值，也可以直接用选项的文本作为提交值，把selectedValue换成selectedText即可。

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