同一页面多下拉框功能异常：仅第一个下拉框值被传递

嘿，我来帮你搞定这个困扰！你现在遇到的问题，核心原因应该是你的updateStatus()函数里，获取select值的方式没有区分当前触发事件的那个下拉框——比如你可能用了document.querySelector('select')或者重复的id选择器，这种方式只会拿到页面上第一个匹配的select元素，所以不管你操作哪个下拉框，传的都是第一个的值。

下面给你两种简单有效的解决方案：

方案一：传递当前触发事件的select元素（最推荐） #

直接把当前下拉框元素通过this关键字传给函数，这样函数就能明确知道要处理哪个select的值。

修改HTML代码 #

把每个select的onchange事件改成传递this：

<tr><td> 
  <select onchange="updateStatus(this);"> 
    <option value="changed&id=771">Change</option>
    <!-- 其他选项 -->
  </select>
</td></tr>
<tr><td> 
  <select onchange="updateStatus(this);"> 
    <option value="changed&id=772">Change</option>
    <!-- 其他选项 -->
  </select>
</td></tr>

对应修改JavaScript函数 #

在函数里直接接收传入的元素，获取它的value：

function updateStatus(selectElement) {
  // 获取当前选中的下拉框值
  const selectedValue = selectElement.value;
  
  // 这里执行你原来的逻辑，比如跳转或发送请求
  // 示例：跳转到对应的URL
  // window.location.href = selectedValue;
  
  // 可以先打印测试一下是否正确拿到值
  console.log("当前选中的value：", selectedValue);
}

方案二：给每个select设置唯一ID并传递ID #

如果你的场景不适合直接传元素，也可以给每个select分配唯一的ID，然后把ID传给函数，再通过ID获取对应的元素。

修改HTML代码 #

给每个select添加唯一id，并在onchange里传递这个id：

<tr><td> 
  <select id="status-select-771" onchange="updateStatus('status-select-771');"> 
    <option value="changed&id=771">Change</option>
  </select>
</td></tr>
<tr><td> 
  <select id="status-select-772" onchange="updateStatus('status-select-772');"> 
    <option value="changed&id=772">Change</option>
  </select>
</td></tr>

对应修改JavaScript函数 #

通过传入的ID获取元素，再取value：

function updateStatus(selectId) {
  const selectElement = document.getElementById(selectId);
  const selectedValue = selectElement.value;
  
  // 执行你的业务逻辑
  console.log("当前选中的value：", selectedValue);
}

为什么原来的代码会出错？ #

举个例子，如果你的updateStatus()函数里是这么写的：

function updateStatus() {
  // 这样只会拿到页面上第一个select的值
  const value = document.querySelector('select').value;
}

querySelector('select')会返回DOM中第一个匹配的select元素，所以不管你点哪个下拉框，拿到的都是第一个的值。而用this或者唯一ID的方式，就能精准定位到当前操作的那个下拉框。

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