根據下拉選擇顯示隱藏div

Question

我有一個包含下拉列表的會員註冊表單。對於事件，首先他們輸入他們的會員資料，選擇一個事件，然後選擇他們希望購買的票數。的選項如下：

• 會員
• 會員+ 1旅客
• 會員+ 2個客人
• 會員+ 3間，等等。

我想要發生的是，因爲「成員」是免費參加的，所以我想保留隱藏的付款單元，除非他們選擇Member + xxxx。

我是一個完全新手，當涉及到JavaScript/jQuery的，但我可以理解它的大部分時，它的書面。

我有一個JSfiddle（http://jsfiddle.net/bEuRh/）創建了一些基礎知識，但我需要一個手寫腳本。一些代碼如下：

<div id="tickets"> 
<label for="CAT_Custom_255276">Number of Tickets: <span class="req">*</span></label> 
<select class="cat_dropdown" id="CAT_Custom_255276" name="CAT_Custom_255276"> 
    <option value=" ">-- Please select --</option> 
    <option value="Member">Member</option> 
    <option value="Member + 1 Guest">Member + 1 Guest</option> 
    <option value="Member + 2 Guests">Member + 2 Guests</option> 
    <option value="Member + 3 Guest">Member + 3 Guests</option> 
</select> 
</div> 
<div id="payMethod"> 
<div class="header"> 
    PAYMENT METHOD 
</div> 
<div id="payOptions"> 
    <div id="payInfo"> 
     <div id="pay0" class="paymentinfo"> 
      <p>PAYMENT INFO OPTION 1</p> 
     </div> 
     <div id="pay1" class="paymentinfo"> 
      <p>PAYMENT INFO OPTION 2</p> 
     </div> 
     <div id="pay2" class="paymentinfo"> 
      <p>PAYMENT INFO OPTION 3</p> 
     </div> 
    </div> 
</div> 
</div> 

如果有人可以請協助，那將不勝感激。

Answer 1

http://jsfiddle.net/bEuRh/5/

我會在檢測到選擇的變化和比較獲得價值..

編輯：

$("select").change(function() { 
    var str = ""; 
    str = parseInt($(this).val()); 

    $("#payMethod").toggle(str >= 2) 
}); 

在HTML中，我將值更改爲整數...

 <option value="0">-- Please select --</option> 
     <option value="1">Member</option> 
     <option value="2">Member + 1 Guest</option> 
     <option value="3">Member + 2 Guests</option> 
     <option value="4">Member + 3 Guests</option> 

，如果你想展示個人格...你可以試試這個..

http://jsfiddle.net/bEuRh/6/

Answer 2

下面是使用純JS的工作示例：

//when a new option is selected... 
document.getElementById('CAT_Custom_255276').addEventListener('change', function() { 
    //hide all .paymentinfo 
    Array.prototype.forEach.call(document.querySelectorAll('.paymentinfo'), function (e) { 
     e.style.display = 'none'; 
    }); 
    //get the selected index - 2 (first two do not impact display) 
    var sel = +this.selectedIndex - 2; 
    //if it is one of the last 3 selected... 
    if (sel >= 0) { 
     //display payMethod and the chosen individual options 
     document.getElementById('payMethod').style.display = 'block'; 
     document.getElementById('pay' + sel).style.display = 'block'; 
    } 
    else { 
     //otherwise hide payMethod 
     document.getElementById('payMethod').style.display = 'none'; 
    } 
}); 

http://jsfiddle.net/bEuRh/4/

Answer 3

我喜歡改變的HTML的雷蒙的做法：

<option value="0">-- Please select --</option> 
    <option value="1">Member</option> 
    <option value="2">Member + 1 Guest</option> 
    <option value="3">Member + 2 Guests</option> 
    <option value="4">Member + 3 Guests</option> 

做到這一點，然後用這個jQuery除非他們選擇多於一個會員的選項，否則隱藏付款單位：

$('.cat_dropdown').change(function() { 
    $('#payMethod').toggle($(this).val() >= 2); 
}); 

我喜歡這種方法有以下幾個原因：

1. 是有意義給每個選項對應於選擇的含義的值。例如，Member + 1 Guest的關聯值爲2。

2. 它以一種有意義，更簡單的方式平衡了標記和javascript之間的代碼。

3. 而不是噸的JavaScript擔心，你只有這三行jQuery來維護。

這裏有一個的jsfiddle來說明：http://jsfiddle.net/martco/3TvwV/4/

Answer 4

這是更好地武官腳本事件，而不是平變化在HTML，但後來我」 d必須添加大量的JS代碼才能使其兼容瀏覽器：

<script type="text/javascript"> 
function showInfo(){ 
    var divs=document.querySelectorAll(".paymentinfo"), 
    i, 
    // next line assumes only one element with this style 
    select=document.querySelectorAll(".cat_dropdown")[0], 
    index; 
    for(i=0;i<divs.length;i++){ 
     divs[i].style.display="none"; 
    } 
    //get the index of the select 
    index=select.selectedIndex-2; 
    if(index>-1){ 
     divs[index].style.display="block"; 
     document.getElementById('payMethod').style.display = 'block'; 
     return 
    } 
    document.getElementById('payMethod').style.display = 'none'; 
} 
</script> 

<div id="tickets"> 
<label for="CAT_Custom_255276">Number of Tickets: <span class="req">*</span></label> 
<select class="cat_dropdown" id="CAT_Custom_255276" name="CAT_Custom_255276" onchange="showInfo();"> 
    <option value=" ">-- Please select --</option> 
    <option value="Member">Member</option> 
    <option value="Member + 1 Guest">Member + 1 Guest</option> 
    <option value="Member + 2 Guests">Member + 2 Guests</option> 
    <option value="Member + 3 Guest">Member + 3 Guests</option> 
</select> 
</div> 
<div id="payMethod" style="display:none"> 
<div class="header"> 
    PAYMENT METHOD 
</div> 
<div id="payOptions"> 
    <div id="payInfo"> 
     <div id="pay0" class="paymentinfo" style="display:none"> 
      <p>PAYMENT INFO OPTION 1</p> 
     </div> 
     <div id="pay1" class="paymentinfo" style="display:none"> 
      <p>PAYMENT INFO OPTION 2</p> 
     </div> 
     <div id="pay2" class="paymentinfo" style="display:none"> 
      <p>PAYMENT INFO OPTION 3</p> 
     </div> 
    </div> 
</div> 
</div>