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

【问题标题】：Hide a form based on the selected option in drop down menu根据下拉菜单中的选定选项隐藏表单
【发布时间】：2011-12-28 00:45:56
【问题描述】：

我在以下情况下遇到了一些问题：

如果在下拉菜单中选择了一个选项，我需要一种隐藏表单的方法。目标是让用户选择他们想要的支付方式，无论是通过信用卡还是通过 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">
....

【问题讨论】：

标签： javascript jquery html forms

【解决方案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();
    }
});

【讨论】：

我尝试添加此代码，但它仍然不适合我。我安装了最新版本的 jQuery。有什么建议吗？

【解决方案2】：

这是一个工作示例：http://jsfiddle.net/CYzsY/

您希望在选择值之前隐藏表单。这样做的方法是将表单上的 CSS 默认设置为 display: none。这将隐藏表单并且不占用屏幕空间。在上面的示例中，我们使用：.hidden { display: none }。

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

我还建议对您的 HTML/CSS 进行样式更改。您应该考虑使用破折号，而不是下划线。所以id="payment_type" 将是id="payment-type"。这样做的好处是更易于键入，并且与 border-width 等 CSS 属性具有相似的语法。

【讨论】：

【解决方案3】：

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

【讨论】：