隐藏基于在下拉菜单中

问题描述：

我有一些麻烦，下面的情况下选择的选项形式：隐藏基于在下拉菜单中

我需要的是一个方式，如果一个选项，在下拉菜单中选择隐藏的形式。目标是让用户通过信用卡或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"> 
....

答

这里的工作示例：http://jsfiddle.net/CYzsY/

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

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

我也建议你的HTML/CSS的风格改变。您应该考虑使用破折号，而不是下划线。所以id="payment_type"将是id="payment-type"。这有利于更轻松地键入，并与CSS属性（如border-width）共享类似的语法。

答

你需要像这样（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。有什么建议么？ – three3 2011-12-27 19:51:35

答

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

隐藏基于在下拉菜单中

相关推荐