如何实现下拉选择框联动？尝试为第二个选择框赋值'2'失败

看起来你在实现下拉框联动时遇到了小问题，我来帮你排查下可能的原因并给出修正方案：

首先，先梳理下你现有代码里可能踩的坑：

• HTML标签未闭合：你代码里的<td><input type="hidden" name="on0" value="Size">这部分没有闭合</td>，会导致DOM结构混乱，jQuery可能找不到目标元素#testid。
• 目标元素问题：要确保第二个下拉框确实存在id="testid"，并且里面有value="2"的选项——如果没有对应的选项，val('2')是不会生效的。
• jQuery依赖问题：如果你的页面没引入jQuery库，那$('#testid')这种写法完全不起作用，这是很容易忽略的点！

修正后的完整代码示例 #

<?php if($row["usesize"] == 1){ ?>
<table>
  <tr>
    <td>
      <input type="hidden" name="on0" value="Size">
    </td>
    <td>
      <!-- 第一个下拉框：修复onchange事件，确保DOM结构正确 -->
      <select name="os0" onchange="$('#testid').val('2').trigger('change');">
        <?php 
        if($conn){
          $query = "SELECT size, color, quant...";
          // 循环输出第一个下拉框的选项（示例）
          while($sizeRow = mysqli_fetch_assoc($query)){
            echo "<option value='{$sizeRow['size']}'>{$sizeRow['size']}</option>";
          }
        }
        ?>
      </select>
    </td>
  </tr>
</table>

<!-- 第二个下拉框：必须存在id="testid"，且包含value="2"的选项 -->
<select id="testid" name="os1">
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
</select>
<?php } ?>

关键注意事项 #

1. 闭合所有HTML标签：一定要确保<td>、<tr>、<table>这些标签都正确闭合，DOM结构错误会导致各种选择器失效的问题。
2. 验证目标元素：检查第二个下拉框的id是否确实是testid，并且存在value="2"的选项。如果没有这个选项，你需要先添加它，或者调整要设置的目标值。
3. 确保引入jQuery：如果用jQuery的写法，要在页面里引入jQuery库（比如本地引入项目内的jQuery文件），否则代码完全不会执行。
4. 调试技巧：如果还是没生效，可以在onchange事件里加调试代码，比如console.log($('#testid'))，打开浏览器控制台看看是否能找到目标元素——如果输出[]，说明选择器没找到元素，就要检查id或者DOM结构了。

无jQuery的替代方案 #

如果你不想依赖jQuery，也可以用原生JS实现：

<select name="os0" onchange="
  const targetSelect = document.getElementById('testid');
  targetSelect.value = '2';
  // 触发change事件（如果需要后续联动逻辑的话）
  targetSelect.dispatchEvent(new Event('change'));
">

这样兼容性更好，也不用依赖外部库。

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