顯示/隱藏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的

回答

相關問題