Jquery 选项值控制css

下面我有一段代码，用来控制在下拉列表中切换时隐藏时显示哪个色块

但是，只有当我在下拉列表（即选择一种颜色）上进行更改时，它才起作用。 但我也需要它在加载时显示正确的色块

现在，不管onload的值是多少，默认情况下它都会显示为红色

如何编辑此代码以实现此目的

 $(function () {
   $("#product-select-option-1").change(function() {
     var val = $(this).val();

    if(val === "Red") {
       $("#red_ok").css({"display":"block"});
       $("#yellow_ok").css({"display":"none"});

    }
    else if(val === "Yellow") {
        $("#yellow_ok").css({"display":"block"});
        $("#red_ok").css({"display":"none"});

    }  }); });

只需手动触发更改事件：

$(function () {
    // binds the change event-handler:
    $("#product-select-option-1").change(function () {
        var val = $(this).val();

        if (val === "Red") {
            $("#red_ok").css({
                "display": "block"
            });
            $("#yellow_ok").css({
                "display": "none"
            });

        } else if (val === "Yellow") {
            $("#yellow_ok").css({
                "display": "block"
            });
            $("#red_ok").css({
                "display": "none"
            });

        }
    // triggers the change event:
    }).change();
});

然而，上述内容可以简化为：

$(function () {
    $("#product-select-option-1").change(function () {
        $('div[id$="ok"]').hide();
        $('#' + this.value.toLowerCase() + '_ok').show();
    }).change();
});

参考资料：

. . 只需手动触发更改事件：

$(function () {
    // binds the change event-handler:
    $("#product-select-option-1").change(function () {
        var val = $(this).val();

        if (val === "Red") {
            $("#red_ok").css({
                "display": "block"
            });
            $("#yellow_ok").css({
                "display": "none"
            });

        } else if (val === "Yellow") {
            $("#yellow_ok").css({
                "display": "block"
            });
            $("#red_ok").css({
                "display": "none"
            });

        }
    // triggers the change event:
    }).change();
});

然而，上述内容可以简化为：

$(function () {
    $("#product-select-option-1").change(function () {
        $('div[id$="ok"]').hide();
        $('#' + this.value.toLowerCase() + '_ok').show();
    }).change();
});

参考资料：

. . 您是否尝试过使用$.changefunction{..}.change；您是否尝试过使用$.changefunction{..}.change；