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?

Answer 1

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

Answer 2

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();
});

Answer 3

Better check value than the text.

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

Answer 4

try this,

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