选中特定选项时显示指定div及编辑页适配问题

看起来你在编辑页面遇到了下拉框对应div显示状态不匹配的问题对吧？核心原因是你在添加页面写的逻辑只在下拉框值改变时触发，但编辑页面加载时，下拉框已经被设置为数据库中保存的旧值，这时候不会触发onchange事件，导致#post div的显示状态和当前选中值不一致。下面是针对性的解决方案：

1. 重构逻辑，封装独立函数 #

把显示/隐藏的逻辑抽成单独的函数，避免重复代码，也方便后续调用：

// 封装切换div显示状态的函数
function togglePostDiv() {
    const selectedVal = $('#post_category_select').val();
    // 简化写法：用三元表达式直接控制显示状态
    $('#post').toggle(selectedVal === '3');
}

这里用toggle()方法代替手动调用show()/hide()，代码更简洁直观。

2. 页面加载时初始化状态 #

在编辑页面加载完成后，手动调用一次这个函数，根据下拉框的初始选中值设置div的状态：

// 页面DOM加载完成后执行初始化
$(document).ready(function() {
    // 初始化div显示状态（关键！编辑页面必须加这一步）
    togglePostDiv();
    // 绑定下拉框的change事件
    $('#post_category_select').on('change', togglePostDiv);
});

3. 优化HTML结构，移除内联事件 #

把原来内联的onchange属性去掉，用jQuery的事件绑定代替，代码更易维护：

<select id="post_category_select">
    <option value="1" <?php echo $savedCategory == '1' ? 'selected' : ''; ?>>1</option>
    <option value="2" <?php echo $savedCategory == '2' ? 'selected' : ''; ?>>2</option>
    <option value="3" <?php echo $savedCategory == '3' ? 'selected' : ''; ?>>3</option>
</select>
<div id="post">Example</div>

注意：这里的$savedCategory是从数据库中取出的当前文章已保存的分类值，需要后端语言（比如PHP）渲染到页面中，确保下拉框默认选中正确的选项。

额外注意事项 #

• 确保页面已经正确引入了jQuery库，否则会出现$ is not defined的错误
• 如果你的编辑页面是通过AJAX动态加载的，需要把事件绑定改成事件委托的形式，比如：$(document).on('change', '#post_category_select', togglePostDiv);
• 测试时可以先确认下拉框的selected属性是否正确渲染，再检查div的初始状态是否符合预期

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