jquery - jquery 显示/隐藏 div 默认显示全部

Question

现在下面的代码完美无缺，但我想默认显示所有房间 div。我该怎么做？

HTML：

<select id="room_type">
    <option value="">-- Type --</option>
    <option value="oneroom">One room</option>
    <option value="tworoom">Two room</option>
</select>

<div id="oneroom" style="display:none">
    CONTENT 1
</div>
<div id="tworoom" style="display:none">
    CONTENT 2
</div>

Javascript

<script type="text/javascript">
;(function ($) {
    $('#room_type').change(function(){
        var location = $(this).val(),
            div = $('#' + location);
        $("div[id$='room']").hide();
        div.show();
    });
})(jQuery);
</script>

Answer 1

看看这个JSfiddle

代码：

(function ($) {

    $("#oneroom, #tworoom").show(); // <-- This

    $('#room_type').change(function(){
        var location = $(this).val(),
            div = $('#' + location);
        $("div[id$='room']").hide();
        div.show();
    });
})(jQuery);

Answer 2

要么去掉style="display:none"你的 div，或者在你的 change 事件处理程序之前添加这个 jQuery：$('div').show();