javascript - 从多个表单中选择的下拉列表

$('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 中，选择表单？提前致谢!

最佳答案

这个 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) 永远不要使用center标签；
2) 小心一些拼写错误，比如双引号，但你只表示一个。也' 与'a'不同，所以要格外小心；
3) 首先，尝试在使用样式(如 font 标签、ew)之前构建整个 HTML，并使用 CSS 设置所有样式；
4) 不要使用表格作为样式的手段；
5) 请在继续执行任何其他操作之前重构您的代码。

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

关于javascript - 从多个表单中选择的下拉列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23837909/

javascript - 从多个表单中选择的下拉列表

上一篇：html - 重叠 HTML 边框底部

下一篇：css - Bootstrap 在小屏幕上隐藏内容