jquery - 使用 jQuery 隐藏 div 并持续选择 onchange

Question

我在使用 select 和 onchange 函数隐藏 div 时遇到了问题。用 jQuery 编写的函数正在运行，它在我更改选择选项值时显示和隐藏 div，但是当我稍后返回页面时它显示 div，即使 select 中的选项设置为应该隐藏 div 的值。

我需要在加载页面时检查选择选项的值并根据该值设置 div 的显示，我该怎么做？

这是我的 HTML 代码:

<select name="cancelation" class="dropdown">
   <option value="refundable">Refundable</option>
   <option value="non-refundable">Non-Refundable</option>
</select>

<div class="row cancelationDaysRow">
    <span class="no-margin-left">Up to</span>
        <div class="input-holder"><input name="cancelationDays" id="cancelation" 
             title="<?php echo $this->__('Cancelation days') ?>" 
             placeholder="<?php echo $this->__('30') ?>" value="30" 
             class="input-text input-text_inner" type="text" 
             onkeyup="this.value=this.value.replace(/[^\d]/,'')" maxlength="3"/>
        </div>
    <span>days before the starting date of this tour</span>
</div>

这是我的 jQuery 函数:

 l$('#addTourForm select[name="cancelation"]').on('change', function(){
        $value = l$(this).val();
        //console.log($value);
        if($value == 'refundable'){
            l$('.cancelationDaysRow').css('display', 'inline-block');
        }else{
            l$('.cancelationDaysRow').css('display', 'none');
        }
    });

编辑 在控制台中，当我更改 select 的值时出现错误:Uncaught SyntaxError: Unexpected token .ListPicker._handleMouseUp @ about:blank:502

Answer 1

只需在选择上触发初始更改事件。

例如使用 .change() 或 .trigger("change"):

l$('#addTourForm select[name="cancelation"]').on('change', function(){
    $value = l$(this).val();
    //console.log($value);
    if($value == 'refundable'){
        l$('.cancelationDaysRow').css('display', 'inline-block');
    }else{
        l$('.cancelationDaysRow').css('display', 'none');
    }
}).change();

这是一个简单的模型，一开始就选择了“不可退款”:

http://jsfiddle.net/TrueBlueAussie/cm2yzch0/

注意事项:

• 为避免页面加载时出现视觉故障，您通常会将 div 设置为最初隐藏，因为如果需要，最好在 DOM 上显示它，而不是在页面显示一瞬间后将其隐藏加载。
• 您的代码不会显示 jQuery 代码的运行位置，但通常它会在 DOM 就绪处理程序中。快捷版本是 jQuery(function(){Your code here});

例如

l$(function(){
    l$('#addTourForm select[name="cancelation"]').on('change', function(){
        $value = l$(this).val();
        //console.log($value);
        if($value == 'refundable'){
            l$('.cancelationDaysRow').css('display', 'inline-block');
        }else{
            l$('.cancelationDaysRow').css('display', 'none');
        }
    }).change();
});

• 您还可以使用带有 bool 值的 toggle 将代码缩减为一行:

例如

$('#addTourForm select[name="cancelation"]').on('change', function () {
    $('.cancelationDaysRow').toggle($(this).val() == 'refundable');
}).trigger('change');