javascript - 根据页面加载时的下拉值显示隐藏/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 下拉列表使用表单模型绑定(bind)从数据库检索其值:

<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>

此选择下拉菜单会隐藏或显示以下div:

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

问题:

如果数据库中存储的模式设置为 0，div 将不会被隐藏。我必须从下拉列表中手动选择“模式 0”来更改它。我知道这是由于 .change() 方法造成的。但如何让它在页面加载时隐藏/显示？

Answer 1

通常在这种情况下，我存储匿名函数引用如下:

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