获取下拉选择框值并通过POST提交的实现方案咨询

我来给你梳理一个简洁可靠的实现方案，分步骤落地：

1. 完善HTML表单结构 #

首先你需要在表单内添加一个隐藏的<input>元素，专门用来存储select选中的值。你的select已经绑定了onchange事件，我们可以直接基于这个逻辑扩展：

<form method="POST" action="你的提交接口地址">
  <!-- 你的下拉选择组件 -->
  <select onchange='getId(this.value)' name="article_domain" class="form-control" required="required">
    <?php 
    $rows = DB::getInstance()->select('SELECT * FROM `domains` ORDER BY `domain_date` DESC');
    foreach($rows as $row): ?>
      <option value="<?php echo $row['domain_id']; ?>"><?php echo $row['domain_name']; ?></option>
    <?php endforeach; ?>
  </select>

  <!-- 新增隐藏输入框，**注意name属性要设置清晰，方便后端接收** -->
  <input type="hidden" name="selected_domain_id" id="selected_domain_id">

  <!-- 其他表单元素和提交按钮 -->
  <button type="submit">提交表单</button>
</form>

2. 实现JavaScript的getId同步函数 #

在页面的<script>标签（或者外部JS文件）里定义这个函数，核心作用是把select选中的值实时赋值给隐藏输入框：

function getId(selectedValue) {
  // 通过ID定位隐藏输入框，赋值选中值
  document.getElementById('selected_domain_id').value = selectedValue;
}

3. 额外优化：覆盖边缘场景 #

有时候用户可能通过键盘上下键选择选项但没触发change事件（比如选中的选项和默认值一致时），可以给表单绑定submit事件，在提交前强制同步一次值，确保数据绝对准确：

// 给表单绑定提交前的同步逻辑
document.querySelector('form').addEventListener('submit', function() {
  const selectElement = document.querySelector('select[name="article_domain"]');
  document.getElementById('selected_domain_id').value = selectElement.value;
});

方案优势 #

• 实时同步+提交前二次校验，覆盖了所有可能的操作场景，不会出现数据遗漏的情况；
• 隐藏输入框的name可自定义，后端能直接和其他表单参数一起接收，无需额外处理逻辑；
• 代码简洁易懂，和你现有代码的兼容性拉满，几乎不用改动原有结构。

测试一下：切换下拉选项后提交表单，后端就能通过selected_domain_id拿到选中的ID值啦。

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