Question

我有这段代码（代码现在正在运行，并从另一个Stack Overflow线程复制）：

    <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元素？我需要对此进行控制，如果可以使用“已选择”属性，那将会很棒吗？

Answer 1

一般来说，这样做的方法是在绑定事件后触发事件，如下所示：

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

您还可以使用快捷键功能：

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

http://jsfiddle.net/K3zk2/

根据带控件的选择选项显示/隐藏div

1 个答案: