Javascript 根据下拉菜单中的选定选项隐藏窗体

我在以下场景中遇到一些问题：

我需要的是一种在下拉菜单中选择选项时隐藏表单的方法。目标是让用户选择他们想要的支付方式，可以通过信用卡，也可以通过PayPal。如果他们选择信用卡，则显示信用卡表单（这是默认的付款方式）。如果他们选择PayPal，那么PayPal表单将显示，并且来自的信用卡将被隐藏。这是我到目前为止的HTML：（如果可以用jQuery实现这一点就好了）

信用卡/借记卡
贝宝帐户
输入信用卡/借记卡详细信息：
....
您需要这样的东西（jQuery）：

下面是一个工作示例：

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

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

我还建议对HTML/CSS进行风格上的更改。代替下划线，你应该考虑使用破折号。因此，
id=“付款类型”
将是
id=“付款类型”
。这样做的好处是更容易键入，并且与CSS属性（如
边框宽度
）共享类似的语法。我尝试添加此代码，但仍然不适用于我。我已经安装了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">
....

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

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