jQuery：下拉框onchange事件触发时设置隐藏输入框的值

嘿，这个需求其实挺常见的，我来给你一步步讲清楚怎么实现～

首先，先确认你的HTML结构大概是这样的（可以根据自己的实际id/class调整）：

<!-- 下拉列表 -->
<select id="myDropdown">
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
</select>

<!-- 隐藏输入框 -->
<input type="hidden" id="hiddenInput" name="selectedValue">

接下来，不管你是用原生JavaScript还是jQuery，核心逻辑都是：在下拉列表的change事件触发时，获取选中选项的value，然后赋值给隐藏输入框的value属性。

原生JavaScript实现 #

假设你已经给下拉列表绑定了change事件，那只需要在事件处理函数里加一行赋值代码就行：

方式1：用getElementById获取元素 #

// 获取下拉列表元素
const dropdown = document.getElementById('myDropdown');
// 获取隐藏输入框元素
const hiddenInput = document.getElementById('hiddenInput');

// 绑定change事件
dropdown.addEventListener('change', function() {
  // 将选中的选项值赋值给隐藏输入框
  hiddenInput.value = this.value;
  // 如果你需要验证的话，可以加个日志看看效果
  console.log('隐藏框当前值：', hiddenInput.value);
});

方式2：用querySelector（适合用class选择的场景） #

如果你的元素是用class定义的，也可以这样写：

const dropdown = document.querySelector('.dropdown-class');
const hiddenInput = document.querySelector('.hidden-input-class');

dropdown.addEventListener('change', function(e) {
  // 这里用e.target也能拿到当前选中的下拉元素
  hiddenInput.value = e.target.value;
});

如果你用jQuery的话（可选） #

要是你的项目里已经引入了jQuery，代码会更简洁：

$('#myDropdown').on('change', function() {
  $('#hiddenInput').val($(this).val());
});

关键点提醒 #

• 确保你的下拉列表选项都设置了value属性，如果没设置，默认会用选项的文本内容作为value
• 隐藏输入框的name属性要根据你的表单提交需求设置，这样提交表单时才能带上这个值
• 如果你已经写好了change事件的处理代码，只需要把赋值那一行插进去就行，不用重新绑定事件

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