根據頁面加載時的下拉值顯示hide / div

Question

我有以下代碼用於隱藏/顯示div使用下拉列表。 如果下拉列表的值為1，則顯示div ，否則我將其隱藏。

var pattern = jQuery('#pattern');
    var select = pattern.value;
    pattern.change(function () {
        if ($(this).val() == '1') {
            $('#hours').show();
        }
        else $('hours').hide();
    });

select下拉列表使用表單模型綁定從數據庫中檢索其值：

<div class="form-group">
   <label for="pattern" class="col-sm-5 control-label">Pattern <span class="required">*</span></label>
   <div class="col-sm-6">
   {{Form::select('pattern',['0'=> 'Pattern 0','1'=> 'Pattern 1'],null,
   ['id'=>'pattern','class' => 'select-block-level chzn-select'])}}
   </div>
</div>

此select下拉列表然后隱藏或顯示以下div ：

<div id="hours" style="border-radius:15px;border: dotted;" >
   <p>Example text</p>
</div>

問題：

如果存儲在數據庫中的模式設置為0，則不會隱藏div。我必須從下拉列表中手動選擇“模式0”以進行更改。 我知道這是由於.change()方法。 但是如何讓它在頁面加載時隱藏/顯示呢？

Answer 1

好吧，如果元素“應該”默認可見，那么你必須檢查條件“隱藏它”（你不必顯示已經可見的元素......）：

if(pattern.value != %WHATEVER%) { $('#hours').toggle(); }

然后，在事件或條件或其他任何事情上切換顯示：

pattern.change(function(evt){
    $('#hours').toggle();
});

不確定您的活動是否有效。 我會嘗試類似的東西

$(document).on(..., function(evt){
    //behaviour
});

http://api.jquery.com/toggle/

https://learn.jquery.com/events/handling-events/

Answer 2

通常在這種情況下我存儲匿名函數引用如下：

var checkPattern = function () {
  if ($('#pattern').val() == '1') {
    $('#hours').show();
  }
  else $('#hours').hide();
}

它使代碼可以在多個地方使用。
現在您的問題可以以更優雅的方式解決：

$(document).ready(function(){
  // add event handler
  $('#pattern').on('change', checkPattern);
  // call to adjust div
  checkPattern();
});