Change the CSS attribute if an option selected with jQuery

Question

I have this code:

<select>
    <option disabled selected>Select Method</option>
    <option value="question">Question</option>
    <option value="password">Password</option>
    <option value="email">Email</option>
    <option value="none">None</option>
</select>

Now I want when user select each of them some div that hidden in css with display:none; get visible for example when user select Question the div that have question id get visible or when Password selected the div that have password id get visible.
I try this but not work:

$(document).ready(function(){
    if ($("#auth option:selected").text() ==  "question"){
        $("#question").css("display","block");
    }
});

So how can I do this?

Bind to the change event of the <select> element, for a start. — Frédéric Hamidi
– Frédéric Hamidi, Commented Sep 9, 2014 at 9:27
Ops, I forget to edit the code, it enable when user click on a checkbook. I fixed it. — ale_x
– ale_x, Commented Sep 9, 2014 at 9:32

Anoop Joshi P · Accepted Answer · 2014-09-09 09:38:27Z

2

If you follow the pattern you have done so far, you have to write code for each option. If your options and div elements are coupled with value and id, you can simply do like this,

$("select").change(function() {
    $("div").hide();
    $("#" + $(this).val()).show();
});

Demo Fiddle

edited Sep 9, 2014 at 9:38

answered Sep 9, 2014 at 9:31

Anoop Joshi P

25.6k9 gold badges35 silver badges54 bronze badges

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

Comments

Adarsh Gowda K R · Accepted Answer · 2014-09-09 09:44:09Z

Here is Demo for this , remove disabled from select tag so that user can select the options

Jsfiddle

http://jsfiddle.net/adarshkr/z9gcf40r/2/

Code

HTML

<select id="showdiv">
    <option disabled selected>Select Method</option>
    <option value="question">Question</option>
    <option value="password">Password</option>
    <option value="email">Email</option>
    <option value="none">None</option>
</select>

<div id="question" class="hide">
    <p>question</p>
</div>

<div id="password" class="hide">
    <p>password</p>
</div>

<div id="email" class="hide">
    <p>email</p>
</div>

<div id="none" class="hide">
    <p>none</p>
</div>

CSS

.hide{
    display:none
}

JAVASCRIPT

$("select").change(function(){
    $("div").hide();
    $("#"+$(this).val()).show();
});

VPK · Accepted Answer · 2014-09-09 09:30:26Z

0

try this,

$('#auth').on('change', function() {
    var that = $(this).val();
    if (that  ===  "question"){
        $("#question").css("display","block");
    }
});

answered Sep 9, 2014 at 9:30

VPK

3,0781 gold badge30 silver badges36 bronze badges

1 Comment

VPK Over a year ago

@ale_x your welcome, you can upvote answer if it helped. Answer by Anoop Joshi is a good one though.

Yamu · Accepted Answer · 2014-09-09 09:27:49Z

0

Better check value than the text.

$(document).ready(function(){
        if ($("#auth option:selected").val() ==  "question"){
            $("#question").css("display","block");
        }
    });

answered Sep 9, 2014 at 9:27

Yamu

1,66210 silver badges15 bronze badges

Collectives™ on Stack Overflow

Change the CSS attribute if an option selected with jQuery

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related