页面加载时默认显示首个目标div的jQuery实现咨询

云上老周

2026-5-20

实现页面加载时默认显示首个目标div的解决方案

嘿，这个需求很好实现，咱们只需要在页面加载完成的初始化逻辑里，主动给第一个符合条件的<div>加上selected类就行，同时还可以顺便把对应的下拉选项选中，保持界面联动的一致性。

具体修改步骤：

在$(document).ready()函数里，绑定完select的change事件之后，添加一段初始化代码：
1. 找到第一个id包含mat-的div，为它添加selected类，这样它就会应用display:block的样式显示出来
2. （可选操作）将下拉框的第一个选项设置为选中状态，让下拉选择和显示的div保持对应

完整代码示例：

$(document).ready(function(){
    // 绑定下拉框change事件
    $("select[name*='material']").change(function(){
        select_changed();
    });

    // 页面初始化时的默认显示逻辑
    // 1. 给第一个mat-开头的div添加selected类
    $("div[id*='mat-']:first").addClass('selected');
    // 2. （可选）选中下拉框的第一个选项
    $("select[name*='material'] option:first").prop('selected', true);
});

function select_changed(){
    // 先移除所有mat-开头div的selected类
    $("div[id*='mat-']").each(function(){
        $(this).removeClass('selected');
    });
    // 根据选中的下拉选项，找到对应的div并添加selected类（补全你原来的逻辑）
    var selectedVal = $("select[name*='material']").val();
    $("div[id*='mat-" + selectedVal + "']").addClass('selected');
}