javascript - Hide elements using jquery based on option select - Stack Overflow

admin管理员组

文章数量:1332890

I have two forms and a selector.

This is my code --

<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>

Now if option 1 is selected i want to hide form CC. if 2 hide form PP.

How do i do it with js or jquery? thanks

I have two forms and a selector.

This is my code --

<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>

Now if option 1 is selected i want to hide form CC. if 2 hide form PP.

How do i do it with js or jquery? thanks

• javascript
• jquery
• forms

Share Improve this question Follow asked Dec 23, 2010 at 19:02 sarthaksarthak 29711 gold badge88 silver badges1616 bronze badges 1

• possible duplicated of stackoverflow./questions/2655911/… but I am sure very much related – Sandeepan Nath Commented Dec 23, 2010 at 19:06

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

Try this (using jQuery):

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

Additionally, you could hide both forms using .hide() as shown above before the user selects any option.

• bind is attaching an event handler to the "change" event of the select box. This is fired when the user changes what option is selected.
• Inside the handler, val is used to determine the value of the currently selected option.
• show() and hide() are used on the correct forms, depending on which option was selected.

Working example: http://jsfiddle/andrewwhitaker/faqZg/

    <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>

本文标签： javascriptHide elements using jquery based on option selectStack Overflow