CODEWITHSUNDEEP
javascriptjqueryhtmlcss
ale_x
ale_x

Reputation: 15

Change the CSS attribute if an option selected with jQuery

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?

Upvotes: 1

Views: 3090

Answers (4)

Adarsh Gowda K R
Adarsh Gowda K R

Reputation: 951

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

Upvotes: 1

Anoop Joshi P
Anoop Joshi P

Reputation: 25527

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

Upvotes: 2

VPK
VPK

Reputation: 3090

try this,

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

Upvotes: 0

Yamu
Yamu

Reputation: 1662

Better check value than the text.

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

Upvotes: 0

Related Questions