Скрыть форму на основе выбранной опции в выпадающем меню

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

Вот рабочий пример: http://jsfiddle.net/CYzsY/

Вы хотите, чтобы ваши формы были скрыты до выбора значения.Способ сделать это состоит в том, чтобы установить CSS на ваших формах по умолчанию display: none.Это скроет формы и не займет место на экране.В приведенном выше примере мы делаем это с помощью: .hidden { display: none }.

Чтобы показать форму, когда выбрано определенное значение, вам просто нужно показать / скрыть в зависимости от выбора ввода.

Я также предложил бы стилистическое изменение вашего HTML / CSS.Вместо подчеркивания, вы должны рассмотреть возможность использования тире.Так что id="payment_type" будет id="payment-type".Преимущество этого заключается в том, что он легче вводится и имеет сходный синтаксис со свойствами CSS, такими как border-width.

Answer 3

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