如果選擇多個選項，使用jQuery顯示隱藏的表單元素？

Question

我在聯繫表單中有一個下拉選擇，並且如果選擇了其中任何一個選項，想要顯示一些額外的表單元素。否則，應該隱藏其他元素。我已經能夠得到這個工作有一個選項，用下面的代碼：

$(".hidden-section").hide(); 
$("#contact-form select").change(function(){ 
    if ($(this).val() == "extra options trigger one") { 
     $(".hidden-section").slideDown("fast"); 
    } else { 
     $(".hidden-section").slideUp("fast"); 
    } 
}); 

不幸的是，我無法弄清楚如何得到，如果選擇任意的兩個選擇這個工作。我已經能夠得到的jQuery甚至工作的唯一方法是這樣的：

$(".hidden-section").hide(); 
$("#contact-form select").change(function(){ 
    if ($(this).val() == "extra options trigger one") || ($(this).val() == "extra options trigger two") { 
     $(".hidden-section").slideDown("fast"); 
    } else { 
     $(".hidden-section").slideUp("fast"); 
    } 
}); 

但在這種情況下，隱藏要素將顯示除默認選擇以外的任何選項一次。

有關更好的方法去解決這個問題的任何想法？非常感謝任何建議。

謝謝！

Answer 1

你得在這條線不應該有額外的括號：

if ($(this).val() == "extra options trigger one") || ($(this).val() == "extra options trigger two") { 

應該是：

if ($(this).val() == "extra options trigger one" || $(this).val() == "extra options trigger two") { 

也就是說，if()語句的條件需要內完全封閉外括號如下：

if (condition1 || condition2)   // valid 
if ((condition1) || (condition2))  // valid 
if (condition1) || (condition2)  // NOT valid 

Answer 2

讓我在你的代碼上添加一些註釋。

首先 - 不要使用$(".hidden-section").hide(); - 您應該將display:none添加到.hidden-section CSS。原因在於，對於一​​些人來說，網絡連接速度很慢，並且直到他們的瀏覽器運行javascript爲hide它將需要一些時間。在這段時間內，它將被看到。他們會經歷一次閃爍 - 某些東西會出現並突然消失。

評論＃2 -

如果您的HTML不阿賈克斯加載，你應該$(function(){ /* code here */ });包起來 - 因爲這將運行JavaScript的，只有當整個頁面已經準備就緒。當JavaScript引用HTML內容時，這是必需的。

評論＃3 -

您的代碼將難以維持 - 想象有需要額外的字段中的第三選擇。

您最好在每個需要額外字段的選項上添加一個類，例如<option class="requires-extra">Option 2</option>，然後您的JavaScript更短。

$(function(){ 
    $("select").change(function(){ 
     var $requiresExtra = $(this).find("option:selected").hasClass("requires-extra"); 
     if ($requiresExtra) { 
      $(".hidden-section").slideDown("fast"); 
     } else { 
      $(".hidden-section").slideUp("fast"); 
     } 
    }); 
}); 

查看my fiddle的工作示例。