Hide elements using jquery based on option select

Question

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

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

Andrew Whitaker · Accepted Answer · 2010-12-23 19:20:09Z

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.net/andrewwhitaker/faqZg/

edited Dec 23, 2010 at 19:20

answered Dec 23, 2010 at 19:14

Andrew Whitaker

126k32 gold badges296 silver badges308 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pradeep Singh · Accepted Answer · 2010-12-23 19:30:44Z

1

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

edited Dec 23, 2010 at 19:30

answered Dec 23, 2010 at 19:14

Pradeep Singh

3,6323 gold badges33 silver badges42 bronze badges

3 Comments

Sandeepan Nath Over a year ago

this is plain javascript, OP would prefer a jquery based answer I guess

Sandeepan Nath Over a year ago

@ngen says you have a spelling mistake if(val==1){document.getElementById('cc').style.display='none';document.getElementById('pp').style.display='inlinr';} - should be document.getElementById('pp').style.display='inline';

ThiefMaster Over a year ago

and not even very good code.. <script>.. which type? you should add type="text/javascript" - and properly indent your code

Collectives™ on Stack Overflow

Hide elements using jquery based on option select

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related