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。这将隐藏表单并占用屏幕空间。在上面的示例中，我们使用以下内容执行此操作：.hidden { display: none }。

要在选择特定值时显示表单，您只需根据输入选择显示/隐藏。

我还建议对HTML / CSS进行风格修改。而不是下划线，你应该考虑使用破折号。因此id="payment_type"将是id="payment-type"。这样做的好处是更容易键入，并与CSS属性（如border-width。

）共享类似的语法

根据下拉菜单中的选定选项隐藏表单

3 个答案: