Скрыть элементы с помощью jquery на основе выбора опции

Question

У меня есть две формы и селектор.

Это мой код -

<select>
<option value="1">Pay</option>
<option value="2">Goog</option>
</select>

<form id="pp">
<input type="text">
</form>

<form id="cc">
<input type="text">
</form>

Теперь, если выбран вариант 1, я хочу скрыть форму CC.если 2 скрыть форму PP.

Как мне сделать это с JS или JQuery?спасибо

Answer 1

Попробуйте это (используя jQuery):

$("select").bind("change", function() {
    if ($(this).val() == "1") {
        $("#pp").show();
        $("#cc").hide();
    }
    else if ($(this).val() == "2") {
        $("#pp").hide();
        $("#cc").show();
    }
});

Кроме того, вы можете скрыть обе формы, используя .hide(), как показано выше, прежде чем пользователь выберет какую-либо опцию.

• bind присоединяет обработчик событий к событию «change» окна выбора. Это срабатывает, когда пользователь меняет выбранную опцию.
• Внутри обработчика, val используется для определения значения текущей выбранной опции.
• show() и hide() используются в правильных формах в зависимости от того, какая опция была выбрана.

Рабочий пример: http://jsfiddle.net/andrewwhitaker/faqZg/

Answer 2

    <script>
    function Hide(val)
    {
    if(val==1)
{
    document.getElementById('cc').style.display='none';
    document.getElementById('pp').style.display='inline';
    }
    if(val==2)
{ 
   document.getElementById('pp').style.display='none';
    document.getElementById('cc').style.display='inline';
    }
} 
   </script>

    <select onchange="Hide(this.value);">
    <option value="">Please Select</option>
    <option value="1">Pay</option>
    <option value="2">Goog</option>
    </select>

    <div id="pp">
    <input type="text">
    </div>

    <div id="cc">
    <input type="text">
    </div>