隱藏基於在下拉菜單中

我有一些麻煩，下面的情況下選擇的選項形式：隱藏基於在下拉菜單中

我需要的是一個方式，如果一個選項，在下拉菜單中選擇隱藏的形式。目標是讓用戶通過信用卡或PayPal選擇他們想要付款的方式。如果他們選擇信用卡，則顯示信用卡表格（這是默認的付款方式）。如果他們選擇PayPal，則PayPal表單將顯示，並且信用卡將被隱藏。這裏是我的HTML至今：（這將是很好，如果這可以用jQuery做）

<select id="payment_type" name="payment_type"> 
    <option value="Credit">Credit/Debit Card</option> 
    <option value="PayPal">PayPal Account</option> 
</select> 


<div id="credit_card_payment"> 
<h2>Enter Credit/Debit Card Details:</h2> 
.... 


<form id="paypal_payment" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" class="clearfix"> 
....

來源

2011-12-27 three3

這裏的工作示例：http://jsfiddle.net/CYzsY/

您希望在選定值之前隱藏表單。做到這一點的方法是默認將表單上的CSS設置爲display: none。這將隱藏表格並且不佔用屏幕空間。在上面的例子中，我們使用：.hidden { display: none }。

要選擇特定值時顯示錶單，只需根據輸入選擇顯示/隱藏。

我也建議你的HTML/CSS的風格改變。您應該考慮使用破折號，而不是下劃線。所以id="payment_type"將是id="payment-type"。這有利於更輕鬆地鍵入，並與CSS屬性（如border-width）共享類似的語法。

來源

2011-12-27 16:42:07

你需要像這樣（jQuery的）：

$('#payment_type').change(function(){ 
    if($(this).val() == "PayPal") { 
     $('#credit_card_payment').hide(); 
     $('#paypal_payment').show(); 
    } else { 
     $('#credit_card_payment').show(); 
     $('#paypal_payment').hide(); 
    } 
});

來源

2011-12-27 16:37:52 bfavaretto

我試着添加這段代碼，但它仍然不適合我。我安裝了最新版本的jQuery。有什麼建議麼？ – three3 2011-12-27 19:51:35

$("#payment_type").change(function(){ 
//add an if else on $(this).val(), use $("#...").hide() or show() 
})

來源

2011-12-27 16:40:20 prongs

隱藏基於在下拉菜單中

回答

相關問題