Jquery 基于带有控件的选择选项显示/隐藏div

我知道这段代码现在正在工作，是从另一个堆栈溢出线程复制的：

    <Select id="colorselector">
       <option value="red">Red</option>
       <option value="yellow">Yellow</option>
       <option value="blue">Blue</option>
    </Select>
    <div id="red" class="colors" style="display:none"> .... </div>
    <div id="yellow" class="colors" style="display:none"> ... </div>
    <div id="blue" class="colors" style="display:none"> ... </div>



 $(function() {    // Makes sure the code contained doesn't run until
              //     all the DOM elements have loaded

      $('#colorselector').change(function(){
      $('.colors').hide();
      $('#' + $(this).val()).show();
   });

});

我想做的是在页面加载时使用选中的选项获取控件。若您在浏览器中运行此选项，您将不会在页面上显示任何div，但当您更改此选项时，一切正常

---

所以问题是如何在页面加载时显示这些div元素？我需要对此进行控制，如果选择属性就可以这样做，那就太好了？

一般来说，这样做的方法是在绑定事件后触发事件，类似这样：

$('selector').on('someEvent', function() {
    //...
}).trigger('someEvent');

您还可以使用快捷方式功能：

$('#colorselector').change(function(){
    //...
}).change();

---

聚敛！非常感谢你！