显示/隐藏div基于选择值 - jQuery的

我想检查，看看我的下拉列表的值是“单日期”，然后如果是这样，隐藏div #ToDate。不知道我在这里做错了什么。显示/隐藏div基于选择值 - jQuery的

HTML

<div class="mc-form-field mc-full"> 
    <label for="formDate">Payment Date:</label> 
    <select name="mc-formPaymentDate" id="PaymentDate"> 
     <option value="Please select">Please select</option> 
     <option value="Single Date">Single Date</option> 
     <option value="Date Range">Date Range</option> 
     <option value="Single Month">Single Month</option> 
     <option value="Last 30 Days">Last 30 Days</option> 
     <option value="Last 60 Days">Last 60 Days</option> 
     <option value="Last 90 Days">Last 90 Days</option> 
    </select> 
</div> 

<div class="mc-form-field mc-half mc-inline"> 
    <label for="mc-formFromDate">From Date:</label> 
    <input type="text" name="formFromDate" id="mc-formFromDate" class="mc-text"> 
</div> 

<div class="mc-form-field mc-half mc-inline mc-right" id="ToDate"> 
    <label for="mc-formToDate">To Date:</label> 
    <input type="text" name="formToDate" id="mc-formToDate" class="mc-text"> 
</div>

的Javascript

$("#PaymentDate").change(function() { 
    if (this.value == 'Single Date') { 
     $('#ToDate').hide(); 
    } 
});

来源

2012-01-10 user1141329

** WOW **你可以修复间距吗？ – Neal 2012-01-10 16:44:36

是所有的JavaScript？如果是这样，你可能想要在调用'$（document）.ready（）'的时候把它包装起来，这样在加载DOM之前它不会被触发。否则，它可能只是看不到你试图绑定的元素。 – David 2012-01-10 16:45:31

嗨，大卫，谢谢，我确实已经把它包装在一个文档中了 - 我只是在这里粘贴了它的这一部分。 – user1141329 2012-01-10 16:52:10

它工作正常，但你需要明确show的TODATE再次，如果测试是假的：

$("#PaymentDate").change(function() { 
    if (this.value == 'Single Date') { 
     $('#ToDate').hide(); 
    } else { 
     $('#ToDate').show(); 
    } 
});

http://jsfiddle.net/mblase75/3F93A/

来源

2012-01-10 16:45:44 Blazemonger

你试过了吗？

<script type="text/javascript"> 
$(document).ready(function(){ 
     $("#PaymentDate").change(function() { 
      if ($(this).val() == 'Single Date') 
       $('#ToDate').hide(); 
     }); 
}); 
</script>

请注意，我用$（本）.VAL（）而不是THIS.VALUE

来源

2012-01-10 16:45:58

'this.value'更高效，但这仍然可以隐藏'＃ToDate'。 – 2012-01-10 16:47:28

试试这个使用jQuery toggle方法可以采取一个布尔标志是否显示或隐藏的元素。

$("#PaymentDate").change(function() { 
    $('#ToDate').toggle(this.value != 'Single Date'); 
});

来源

2012-01-10 16:47:18 ShankarSangoli

这是我第一次见到'toggle（）'接受一个布尔参数。俏皮。 – Blazemonger 2012-01-10 16:49:08

谢谢你的作品！ – user1141329 2012-01-10 17:01:05

显示/隐藏div基于选择值 - jQuery的

回答

相关问题