持续使用 jQuery 和 select onchange 隐藏 div

Question

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

的值

我需要在加载页面时检查 select 选项的值并根据该值设置 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');
        }
    });

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

Answer 1

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

例如使用 .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();

这是一个简单的模型，开头是 "Non-refundable" select：

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

您还可以使用带有布尔值的 toggle 将代码缩减为一行：

例如

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

Answer 2

您应该使用内联 css "style='display:none'" 默认隐藏您的 div

<div class="row cancelationDaysRow" style="display:none">
   <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 和 select onchange 隐藏 div

Hiding div using jQuery and select onchange persistently

html

css

jquery

show

hide

备注：