Показать скрыть/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. Мне нужно вручную выбрать «Pattern 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(); 
}); 

Answer 2

Ну, если элемент «должен» быть видимым по умолчанию, вам просто нужно проверить условие «скрыть его» (вам не нужно ПОКАЗАТЬ элемент, который уже виден ...):

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/