1. 首页
  2. 问答
  3. 下拉从多种形式

下拉从多种形式

2014-05-23 72 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

相关问题

 相关问题