Question

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="me@mysite.com">
<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="me@mysite.com">
<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="me@mysite.com">
<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="me@mysite.com">
<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="me@mysite.com">
<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="me@mysite.com">
<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="me@mysite.com">
<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="me@mysite.com">
<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中的问题，选择表格？提前谢谢！

Answer 1

这个 FIDDLE BEGINS可以帮助您解决问题。

$(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'不同，所以要格外小心;
3）首先，尝试使用样式（如 font 标记，ew）构建整个HTML，并使用CSS设置所有内容;
4）不要使用表格作为样式;
5）请在继续做其他事情之前重新编写代码。

这是不您需要的完整答案，但这是我能够做到的。

下拉列表可从多个表单中进行选择

1 个答案: