1. 首頁
  2. 問答
  3. 下拉從多種形式

下拉從多種形式

2014-05-23 70 views
-1

JS下拉從多種形式

$('p select[name=Membership_Selection]').change(function(e){ 
    if ($('p select[name=Membership_Selection]').val() == 'Z'){ 
    $('#Z').show(); 
    }else{ 
    $('#Z').hide(); 
    } 
}); 



$('p select[name=Membership_Selection]').change(function(e){ 
    if ($('p select[name=Membership_Selection]').val() == 'A_A''){ 
    $('#A_A').show(); 
    }else{ 
    $('#A_A'').hide(); 
    } 
}); 


$('p select[name=Membership_Selection]').change(function(e){ 
    if ($('p select[name=Membership_Selection]').val() == 'B_B'){ 
    $('#B_B').show(); 
    }else{ 
    $('#B_B').hide(); 
    } 
}); 



$('p select[name=Membership_Selection]').change(function(e){ 
    if ($('p select[name=Membership_Selection]').val() == 'C_C'){ 
    $('#C_C').show(); 
    }else{ 
    $('#C_C').hide(); 
    } 
}); 



$('p select[name=Membership_Selection]').change(function(e){ 
    if ($('p select[name=Membership_Selection]').val() == 'D_D'){ 
    $('#D_D').show(); 
    }else{ 
    $('#D_D').hide(); 
    } 
}); 



$('p select[name=Membership_Selection]').change(function(e){ 
    if ($('p select[name=Membership_Selection]').val() == 'E_E'){ 
    $('#E_E').show(); 
    }else{ 
    $('#E_E').hide(); 
    } 
}); 



$('p select[name=Membership_Selection]').change(function(e){ 
    if ($('p select[name=Membership_Selection]').val() == 'F_F'){ 
    $('#F_F').show(); 
    }else{ 
    $('#F_F').hide(); 
    } 
}); 



$('p select[name=Membership_Selection]').change(function(e){ 
    if ($('p select[name=Membership_Selection]').val() == 'G_G'){ 
    $('#G_G').show(); 
    }else{ 
    $('#G_G').hide(); 
    } 
}); 



$('p select[name=Membership_Selection]').change(function(e){ 
    if ($('p select[name=Membership_Selection]').val() == 'H_H'){ 
    $('#H_H').show(); 
    }else{ 
    $('#H_H').hide(); 
    } 
});

CSS

/*------------------------------------*\ 
    Members Dropdown 
\*------------------------------------*/ 

#A_A{display:none;} 
#B_B{display:none;} 
#C_C{display:none;} 
#D_D{display:none;} 
#E_E{display:none;} 
#F_F{display:none;} 
#G_G{display:none;} 
#H_H{display:none;}

HTML

 <div id="membership" align="right">   


      <p> <font size="2"><center><b>Become a Member</b></p></font></center> 

        <table> 
        <tbody><tr><td> 
       <p> <center> <font size="2">Alphabet Soup Membership Type</font></center></td></tr><tr><td> 

<p><center> 
<select name ="Membership_Selection" required> 
<option value="Z">-- Select an Option --</option> 
<option value="A_A">a a $5 year</option> 
<option value="B_B">b b $10 year</option> 
<option value="C_C">c c : $15 year</option> 
<option value="D_D">d d $20 year</option> 
<option value="E_E">e e $25 year</option> 
<option value="F_F">f f : $30 year</option> 
<option value="G_G">g g : $35 year</option> 
<option value="H_H">h h : $40 year</option> 
</select></center></p> 



<center> 
<form id="Z" target="paypal" action="" method="post"> 
<input class="memsubbut" value="Subscribe" type="submit" border="0" name="submit" alt="PayPal"></center> 
</form> 

<center> 
<form id="A_A" target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post"> 
<input type="hidden" name="cmd" value="_xclick-subscriptions"> 
<input type="hidden" name="business" value="[email protected]"> 
<input type="hidden" name="item_name" value="Alpha Member - AA"> 
<input type="hidden" name="item_number" value="AA"> 
<input type="hidden" name="no_shipping" value="1"> 
<input type="hidden" name="no_note" value="1"> 
<input type="hidden" name="currency_code" value="USD"> 
<input type="hidden" name="a3" value="5"> 
<input type="hidden" name="p3" value="1"> 
<input type="hidden" name="t3" value="Y"> 
<input type="hidden" name="src" value="1"> 
<input type="hidden" name="sra" value="1"> 
<input type="hidden" name="return" value="https://example.com/thanks.php"> 
<input type="hidden" name="notify_url" value="http://example.com/pay_paypal/paypal.php"> 
<input class="memsubbut" value="Subscribe" type="submit" border="0" name="submit" alt="PayPal"> 
</form></center> 


<center> 
<form id="B_B" target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post"> 
<input type="hidden" name="cmd" value="_xclick-subscriptions"> 
<input type="hidden" name="business" value="[email protected]"> 
<input type="hidden" name="item_name" value="Alpha Member - BB"> 
<input type="hidden" name="item_number" value="BB"> 
<input type="hidden" name="no_shipping" value="1"> 
<input type="hidden" name="no_note" value="1"> 
<input type="hidden" name="currency_code" value="USD"> 
<input type="hidden" name="a3" value="10"> 
<input type="hidden" name="p3" value="1"> 
<input type="hidden" name="t3" value="Y"> 
<input type="hidden" name="src" value="1"> 
<input type="hidden" name="sra" value="1"> 
<input type="hidden" name="return" value="https://example.com/thanks.php"> 
<input type="hidden" name="notify_url" value="https://example.com/pay_paypal/paypal.php"> 
<input class="memsubbut" value="Subscribe" type="submit" border="0" name="submit" alt="PayPal"> 
</form></center> 

<center> 
<form id="C_C" target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post"> 
<input type="hidden" name="cmd" value="_xclick-subscriptions"> 
<input type="hidden" name="business" value="[email protected]"> 
<input type="hidden" name="item_name" value="Alpha Member - CC"> 
<input type="hidden" name="item_number" value="CC"> 
<input type="hidden" name="no_shipping" value="1"> 
<input type="hidden" name="no_note" value="1"> 
<input type="hidden" name="currency_code" value="USD"> 
<input type="hidden" name="a3" value="15"> 
<input type="hidden" name="p3" value="1"> 
<input type="hidden" name="t3" value="Y"> 
<input type="hidden" name="src" value="1"> 
<input type="hidden" name="sra" value="1"> 
<input type="hidden" name="return" value="https://example.com/thanks.php> 
<input type="hidden" name="notify_url" value="https://example.com/pay_paypal/paypal.php"> 
<input class="memsubbut" value="Subscribe" type="submit" border="0" name="submit" alt="PayPal"> 
</form></center> 

<center> 
<form id="D_D" target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post"> 
<input type="hidden" name="cmd" value="_xclick-subscriptions"> 
<input type="hidden" name="business" value="[email protected]"> 
<input type="hidden" name="item_name" value="Alpha Member - DD"> 
<input type="hidden" name="item_number" value="DD"> 
<input type="hidden" name="no_shipping" value="1"> 
<input type="hidden" name="no_note" value="1"> 
<input type="hidden" name="currency_code" value="USD"> 
<input type="hidden" name="a3" value="20"> 
<input type="hidden" name="p3" value="1"> 
<input type="hidden" name="t3" value="Y"> 
<input type="hidden" name="src" value="1"> 
<input type="hidden" name="sra" value="1"> 
<input type="hidden" name="return" value="https://example.com/thanks.php"> 
<input type="hidden" name="notify_url" value="https://example.com/pay_paypal/paypal.php"> 
<input class="memsubbut" value="Subscribe" type="submit" border="0" name="submit" alt="PayPal"> 
</form></center> 

<center> 
<form id="E_E" target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post"> 
<input type="hidden" name="cmd" value="_xclick-subscriptions"> 
<input type="hidden" name="business" value="[email protected]"> 
<input type="hidden" name="item_name" value="Alpha Member - EE"> 
<input type="hidden" name="item_number" value="EE"> 
<input type="hidden" name="no_shipping" value="1"> 
<input type="hidden" name="no_note" value="1"> 
<input type="hidden" name="currency_code" value="USD"> 
<input type="hidden" name="a3" value="25"> 
<input type="hidden" name="p3" value="1"> 
<input type="hidden" name="t3" value="Y"> 
<input type="hidden" name="src" value="1"> 
<input type="hidden" name="sra" value="1"> 
<input type="hidden" name="return" value="https://example.com/thanks.php"> 
<input type="hidden" name="notify_url" value="https://example.com/pay_paypal/paypal.php"> 
<input class="memsubbut" value="Subscribe" type="submit" border="0" name="submit" alt="PayPal"> 
</form></center> 

<center> 
<form id="F_F" target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post"> 
<input type="hidden" name="cmd" value="_xclick-subscriptions"> 
<input type="hidden" name="business" value="[email protected]"> 
<input type="hidden" name="item_name" value="Alpha Member - FF"> 
<input type="hidden" name="item_number" value="FF"> 
<input type="hidden" name="no_shipping" value="1"> 
<input type="hidden" name="no_note" value="1"> 
<input type="hidden" name="currency_code" value="USD"> 
<input type="hidden" name="a3" value="30"> 
<input type="hidden" name="p3" value="1"> 
<input type="hidden" name="t3" value="Y"> 
<input type="hidden" name="src" value="1"> 
<input type="hidden" name="sra" value="1"> 
<input type="hidden" name="return" value="https://example.com/thanks.php"> 
<input type="hidden" name="notify_url" value="https://example.com/pay_paypal/paypal.php"> 
<input class="memsubbut" value="Subscribe" type="submit" border="0" name="submit" alt="PayPal"> 
</form></center> 

<center> 
<form id="G_G" target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post"> 
<input type="hidden" name="cmd" value="_xclick-subscriptions"> 
<input type="hidden" name="business" value="[email protected]"> 
<input type="hidden" name="item_name" value="Alpha Member - GG"> 
<input type="hidden" name="item_number" value="GG"> 
<input type="hidden" name="no_shipping" value="1"> 
<input type="hidden" name="no_note" value="1"> 
<input type="hidden" name="currency_code" value="USD"> 
<input type="hidden" name="a3" value="35"> 
<input type="hidden" name="p3" value="1"> 
<input type="hidden" name="t3" value="Y"> 
<input type="hidden" name="src" value="1"> 
<input type="hidden" name="sra" value="1"> 
<input type="hidden" name="return" value="https://example.com/thanks.php"> 
<input type="hidden" name="notify_url" value="https://example.com/pay_paypal/paypal.php"> 
<input class="memsubbut" value="Subscribe" type="submit" border="0" name="submit" alt="PayPal"> 
</form></center> 

<center> 
<form id="H_H" target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post"> 
<input type="hidden" name="cmd" value="_xclick-subscriptions"> 
<input type="hidden" name="business" value="[email protected]"> 
<input type="hidden" name="item_name" value="Alpha Member - HH"> 
<input type="hidden" name="item_number" value="HH"> 
<input type="hidden" name="no_shipping" value="1"> 
<input type="hidden" name="no_note" value="1"> 
<input type="hidden" name="currency_code" value="USD"> 
<input type="hidden" name="a3" value="40"> 
<input type="hidden" name="p3" value="1"> 
<input type="hidden" name="t3" value="Y"> 
<input type="hidden" name="src" value="1"> 
<input type="hidden" name="sra" value="1"> 
<input type="hidden" name="return" value="https://example.com/thanks.php"> 
<input type="hidden" name="notify_url" value="https://example.com/pay_paypal/paypal.php"> 
<input class="memsubbut" value="Subscribe" type="submit" border="0" name="submit" alt="PayPal"> 
</form></center> 
        </td></tr> 
        </tbody> 
        </table> 




      </div><!-- #membership -->

我缺少什麼選擇？我以爲是在沙箱裏工作，但我想沒有仔細看。

本質上，我隱藏所有形式（按鈕）在CSS中。然後我讓我們JS給他們看，但一次只有一個。 然後選擇下拉菜單的HTML。是JS中的問題，選擇表單？ 在此先感謝！

來源

2014-05-23 user3670268

+1

你的JS包含一個語法錯誤 - 一個雙關閉報價。遵循DRY原則，您的代碼也可以*大量*簡化。 –

+0

哇，這裏可以清除/清理很多重複的代碼。 –

+0

好的，請幫忙。我不是一個正式的訓練（哈哈 - 我想你可以告訴）。 :-)這就是我需要啓動和運行的一切。我能做些什麼來解決它？ – user3670268

回答

2

This FIDDLE開始幫助你解決你的問題。

$(document).ready(function() { 

    $('select[name=Membership_Selection]').change(function (e) { 
     switch ($(this).val()) { 
      case "A": 
       hideAllExcept($("#A")); 
       break; 
      case "B": 
       hideAllExcept($("#B")); 
       break; 
      case "C": 
       hideAllExcept($("#C")); 
       break; 
      default: 
       // do something defaultly 
     } 
    }); 
}); 

function hideAllExcept(toShow) { 
    toShow.show(); 
    $("#membership").find('div').each(function() {    
     if ($(this).attr('id') != toShow.attr('id')) { 
      $(this).hide(); 
     } 
    }); 
}

我必須刪除很多代碼才能理解。現在你只需要粘貼一些東西並開始工作。

一些提示：

  • 1）不要使用中心標籤一樣，永遠。
  • 2）小心一些錯別字，比如你只指一個單引號。 'a' 與'a'不同，所以要格外小心; 3）首先，嘗試在使用樣式（如字體標記，ew）， 和樣式使用CSS的所有樣式之前嘗試構建整個HTML;
  • 4）不要使用表作爲造型的意思;
  • 5）請在繼續執行其他任何事情之前先對代碼進行修改。

這是不是你需要一個完整的答案，但它是我能夠做到。

來源

2014-05-23 21:41:14 cr0ss

+0

謝謝cr0ss。這讓我擺平了！對不起，延遲...只是想完成它，以確保我很好。這裏顯然是新的。尋找一種方式向你發送私人信息，但沒有看到辦法。打算給你會員訪問（登錄詳細信息）到我的網站，感謝你的幫助。 ：-） 非常感謝。如果你能告訴我一種私下的方式，我會很樂意這樣做。再次感謝！ – user3670268

+0

@ user3670268很高興幫助！希望一切工作正常:) – cr0ss

相關問題

 相關問題