根据页面加载时的下拉值显示 hide/div

Question

我有以下代码，我使用下拉菜单 hide/show a 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 将不会被隐藏。我必须从下拉菜单中手动 select "Pattern 0" 来更改它。我知道这是由于 .change() 方法。但是如何在页面加载时使其成为 hide/show 呢？

Answer 1

好吧，如果元素 "should" 默认可见，那么您只需检查 "hide it" 的条件（您不必显示已经可见的元素... ) :

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

根据页面加载时的下拉值显示 hide/div

Show hide/div based on drop down value at page load

html

javascript

jquery

model-binding

laravel