隱藏基於下拉菜單中所選選項的表單

Question

我在以下情況下遇到麻煩：

我需要的是一種在下拉菜單中選擇一個選項時隱藏表單的方法。 目標是讓用戶選擇通過信用卡或通過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">
....

Answer 1

您需要這樣的東西（jQuery）：

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

Answer 2

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

Answer 3

這是一個工作示例： http : //jsfiddle.net/CYzsY/

您希望在選擇值之前隱藏表單。 為此，可以將表單上的CSS設置為display: none默認情況下display: none 。 這將隱藏表單並且不占用屏幕空間。 在上面的示例中，我們使用以下命令執行此操作： .hidden { display: none } 。

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

我還建議對HTML / CSS進行樣式更改。 您應該考慮使用破折號代替下划線。 因此id="payment_type"將為id="payment-type" 。 這具有易於鍵入的優點，並且與CSS屬性（例如border-width共享相似的語法。