Question

我在使用select和onchange功能隐藏div时遇到了麻烦。用jQuery编写的函数正在工作，它在我更改选择选项值时显示和隐藏div但是当我稍后返回页面时它显示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');
        }
    });

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

Answer 1

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

e.g。使用.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 ready处理程序中。快捷方式版本为jQuery(function(){Your code here});

e.g。

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将代码缩减到一行：

e.g。

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

Answer 2

你应该使用内联css隐藏你的div＆＃34; style =＆＃39; display：none＆＃39;＆＃34;默认情况下

<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隐藏div并持续选择onchange

2 个答案:

说明：