CMS中选择按钮切换时Div无法实时显示/隐藏的问题求助

嘿，我来帮你搞定这个问题！你现在的代码只在页面加载时执行一次，所以只有刷新页面才会生效——核心问题是你没有把判断逻辑绑定到按钮的状态变更事件上，只是在页面初始化时跑了一遍判断而已，完全没监听后续的选项变化。

另外提一句，你在hide()/show()之后调用.blur().change()是多余的，这俩方法是用来触发元素的失焦和变更事件的，但你现在需要的是监听按钮的变更，不是触发它，所以这部分可以删掉。

修复后的完整代码方案 #

我给你调整成实时生效的版本，分两步：先把切换逻辑封装成可复用的函数，然后绑定事件监听+初始化执行：

$(document).ready(function() {
  // 封装Div显示隐藏的逻辑，方便复用
  function toggleMyDiv() {
    const selectedOption = $('#Choice').val();
    const targetDiv = $('#myDiv');
    
    if (selectedOption === 'Option 1') {
      targetDiv.hide();
    } else {
      targetDiv.show();
    }
  }

  // 页面加载完成后先执行一次，确保初始状态正确
  toggleMyDiv();

  // 监听下拉框/按钮的状态变更，实时触发切换
  $('#Choice').on('change', toggleMyDiv);
});

更简洁的写法（用jQuery的toggle方法） #

如果想让代码更精简，可以用toggle()方法，它接受布尔值来控制显示隐藏，一行搞定判断：

$(document).ready(function() {
  function toggleMyDiv() {
    // 当选中的不是Option 1时显示Div，否则隐藏
    $('#myDiv').toggle($('#Choice').val() !== 'Option 1');
  }

  toggleMyDiv();
  $('#Choice').on('change', toggleMyDiv);
});

额外注意事项 #

• 务必确认你的按钮/下拉框的ID确实是#Choice，目标Div的ID是#myDiv——ID拼写错误是这类问题最常见的坑！
• 如果你的CMS是通过AJAX动态加载这个按钮（比如页面加载后才渲染出来），那得用事件委托来绑定事件，确保动态元素也能触发：

$(document).ready(function() {
  function toggleMyDiv() {
    $('#myDiv').toggle($('#Choice').val() !== 'Option 1');
  }

  toggleMyDiv();
  // 把事件绑定到document上，监听动态生成的#Choice元素
  $(document).on('change', '#Choice', toggleMyDiv);
});

这样调整后，你选择不同选项时，Div就会实时显示或隐藏，再也不用刷新页面啦！

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