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

Hide a form based on the selected option in drop down menu

本文关键字：选项 隐藏 表单 下拉菜单      更新时间：2023-09-26

我在以下场景中遇到了一些麻烦:

我需要的是一种方法来隐藏一个表单，如果一个选项是在下拉菜单中选择。目标是让用户选择他们想要的支付方式，无论是通过信用卡还是通过PayPal。如果他们选择Credit Card，则显示Credit Card表单(这是默认的付款方式)。如果他们选择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">
....

你需要这样做(jQuery):

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

下面是一个工作示例:http://jsfiddle.net/CYzsY/

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

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

我还建议改变你的HTML/CSS样式。你应该考虑使用破折号而不是下划线。所以id="payment_type"就是id="payment-type"。这样做的好处是更容易输入，并且与border-width等CSS属性共享类似的语法。

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