选择框切换后目标DIV无法显示问题求助

1. 修复HTML结构错误 #

你的HTML代码存在多余的闭合标签，会导致DOM结构紊乱，直接影响事件绑定和元素渲染。比如这段无对应开启标签的</div>：

</div>
    </div>

</div>

请检查并修正整个HTML的嵌套结构，确保每个开启的标签都有对应的闭合标签，避免浏览器自动修正DOM带来的异常。

2. 简化并统一JS代码（推荐） #

你当前混用了原生JS和jQuery语法，可以统一使用jQuery来简化逻辑，同时避免潜在的DOM操作问题：

$(document).ready(function () {
    // 初始隐藏目标DIV
    const $targetDiv = $('#showRef').hide();
    // 绑定select的change事件
    $('.selRef').on('change', function () {
        // 根据选中值切换显示/隐藏
        $targetDiv.toggle($(this).val() === 'Yes');
    });
});

3. 验证元素选择与事件触发 #

• 打开浏览器开发者工具（F12），切换到Console标签，输入$('.selRef')，确认能返回对应的select元素。如果返回空数组，说明选择器无效，检查select的class是否正确渲染（因为有runat="server"，需确保客户端渲染后的class仍是selRef）。
• 在change事件中添加日志，验证事件是否触发：

  $('.selRef').on('change', function () {
      console.log('change事件已触发，当前值：', this.value);
      // 后续显示隐藏逻辑
  });
  

  如果控制台没有输出，说明事件未绑定成功，排查是否有其他JS代码覆盖了jQuery或阻止了事件传播。

4. 检查CSS优先级冲突 #

打开开发者工具的Elements标签，查看#showRef元素的Computed样式，确认是否有其他CSS规则（比如带!important的样式）强制设置display: none，导致JS修改的行内样式被覆盖。如果有，调整CSS优先级或移除冲突规则。

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