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

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

2 个答案: