在页面加载时根据下拉值显示隐藏/div答案

【问题标题】：Show hide/div based on drop down value at page load在页面加载时根据下拉值显示隐藏/div
【发布时间】：2017-05-27 16:21:16
【问题描述】：

我有以下代码，用于使用下拉菜单隐藏/显示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() 方法。但是如何让它在页面加载时隐藏/显示？

【问题讨论】：

你没有在 JS 末尾或视图文件末尾尝试过“pattern.change()”

标签： javascript jquery html laravel model-binding

【解决方案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();
});

【讨论】：

这是行之有效的解决方案。我不知道为什么它被否决了。
页面上还有一个答案，现在被删除了。嫉妒的崩溃？

【解决方案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/

【讨论】：