如何用Dropdown选中值控制相邻TD内指定类DIV的显示隐藏？

我来帮你搞定这个问题！你当前的代码核心问题是元素定位逻辑错了——closest()方法是向上查找最近的父级元素，而你要找的是当前下拉框所在单元格的下一个相邻单元格里的Div，所以原代码的选择器完全找不到目标元素，这就是为什么没效果也没报错的原因。

先理清楚正确的定位路径： #

1. 从当前触发change事件的下拉框（this）出发，先找到它所在的<tr>行
2. 定位到该行里的第二个<td>（或者直接找下拉框所在td的下一个td）
3. 在这个td里操作所有Div：先隐藏全部，再显示选中值对应的那个

修正后的完整代码 #

首先给Div加上初始隐藏的CSS（页面加载时默认不显示，或者你可以设置默认显示第一个）：

/* 初始隐藏所有目标Div */
.firstDiv, .secondDiv {
  display: none;
}
/* 如果需要默认显示第一个，可以加上这行 */
.firstDiv {
  display: block;
}

然后是JavaScript代码：

$('.dropdown').change(function() {
  // 声明变量避免全局污染，获取当前选中的值
  const selectedValue = $(this).val();
  
  // 方法1：通过父级tr定位目标td
  const targetTd = $(this).closest('tr').find('td:eq(1)');
  // 方法2：直接找当前td的下一个相邻td（更直接）
  // const targetTd = $(this).closest('td').next();
  
  // 先隐藏目标td里的所有Div
  targetTd.find('div').hide();
  // 显示与选中值匹配的Div
  targetTd.find('.' + selectedValue).show();
}).trigger('change'); // 页面加载时主动触发一次change，确保默认选中的Div正确显示

为什么原代码无效？ #

原代码里的$(this).closest("td > .firstDiv")是在当前下拉框的父级元素里找符合td > .firstDiv的元素，但下拉框的直接父级是<td>，这个td的子元素只有<select>，根本没有.firstDiv，所以这个选择器返回的是空集合，自然不会有任何操作效果，也不会报错（空集合的jQuery方法不会抛出错误）。

额外优化建议 #

• 用const/let声明变量，避免像原代码那样把id和value暴露成全局变量，减少潜在的bug
• 加上.trigger('change')确保页面刚加载时，默认选中的选项对应的Div也能正确显示，而不是只有手动切换下拉框才生效

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