jQuery控制动态生成td标签显隐切换失效问题排查

你的代码有几个核心问题导致状态切换失效：

• switch分支的判断值未加字符串引号：case(show)、case(hide)中的show/hide会被识别为未定义的变量，而非下拉选项的value字符串，逻辑永远走default分支，showvariable恒为false，td会一直保持隐藏状态
• 事件绑定存在失效风险：如果.selected_option下拉框和td一样是动态拼接生成的，页面初始加载时直接绑定change事件无法命中动态生成的元素
• 语法缺失：change事件的回调函数末尾缺少闭合括号，代码本身存在语法错误
• 额外隐患：如果动态拼接td时重复生成了同id的元素，jQuery只会选中第一个匹配项，后续重复id的td无法被控制

替换为以下代码即可，写法兼容动态生成的下拉框和td元素：

// td拼接逻辑保持不变
tempHtml += '<td id="lang-capvariable"><input type="text" class="w3-input"></td>';

// 用事件委托绑定change事件，兼容动态生成的下拉框
$(document).on('change', '.selected_option', function() {
  const selectedVal = $(this).val();
  const showVariable = selectedVal === 'show'; // 直接判断即可，不需要冗余的switch
  $('#lang-capvariable').toggle(showVariable); // 用toggle更简洁，传入布尔值直接控制显隐
});

• 确认下拉选项的value值确实为show/hide，如果实际value是其他内容，替换判断条件里的对应字符串即可
• 确保lang-capvariable这个id在当前页面全局唯一，不要重复拼接相同id的td
• 如果加了上述代码还是无法显示，检查是否有CSS样式给td加了display: none !important强制隐藏规则，这种高优先级样式jQuery的show/toggle方法无法覆盖

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