控制css的选项值

Question

我在这里下面有这段代码，用来控制在下拉列表上切换显示在哪个颜色块上。

但是，它只适用于当我在下拉列表（即选择一种颜色）进行更改。 但我需要它也加载正确的颜色块。

现在，无论onload值如何，其默认显示#red_ok。

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

$(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"}); 

    } }); }); 

。

#red_ok {width:25px; height:25px; background:#c40314;} 
#yellow_ok {display:none; width:25px; height:25px; background:#f5d116;} 

Answer 1

只需触发手动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(); 
}); 

JS Fiddle demo。

上面可以，但是，可以减小和简化，以便：

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

JS Fiddle demo。

参考文献：

• Attribute-ends-with ([attribute$="value"]) selector。
• change()。