CODEWITHSUNDEEP
javascriptjquery
abc
abc

Reputation: 215

Select option is returning only one option

I have a select option with two colors, red and blue. When I choose red it should set background color to red, and if I choose blue it should set background color to blue. The problem is that whatever I choose it sets background color to red.

<select id ="selectColor">
    <option >none</option>
    <option value="red">Red</option>
    <option value="blue">Blue</option>
</select>

$(document).ready(function () {
    $("#selectColor").change(function () {
        if ($(this).text != "red") {
            document.body.style.backgroundColor = "blue";
        }
        if ($(this).text !="blue")
         {
          document.body.style.backgroundColor = "red";
         }
    });
});

Upvotes: 0

Views: 100

Answers (6)

Oka
Oka

Reputation: 26345

Actually, it's first setting your background to blue, and then red because $(this).text is equal to neither. It's likely undefined.

You're looking for the .val() method, to extract the value attribute.

$(document).on('ready', function () {
  $("#selectColor").on('change', function () {
    var val = $(this).val();
    
    document.body.style.backgroundColor = val;
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<select id="selectColor">
    <option value="">none</option>
    <option value="red">Red</option>
    <option value="blue">Blue</option>
</select>

Upvotes: 2

nelek
nelek

Reputation: 4312

There is shortest and easiest example :

<select onchange="javascript:document.body.style.backgroundColor=this.value;">
    <option >none</option>
    <option value="red">Red</option>
    <option value="blue">Blue</option>
</select>

Upvotes: 2

Akki619
Akki619

Reputation: 2432

Use val() instead of text();

$(document).ready(function () {
$("#selectColor").change(function () {
    console.log($(this).val());
    if ($(this).val() != "red") {
        document.body.style.backgroundColor = "blue";
    }
     if ($(this).val() !="blue")
        {
        document.body.style.backgroundColor = "red";
    }
});
});

DEMO

Upvotes: 1

aphextwix
aphextwix

Reputation: 1858

Here's an example using jQuery : -

$(document).ready(function () { 
    $("#selectColor").change(function () {
        if ($(this).val() === "red") {
            $('body').css('background-color', 'blue');
        } else {
            $('body').css('background-color', 'red');
        }
    });

See this JS Fiddle as an example - EXAMPLE });

Upvotes: 1

Quentin
Quentin

Reputation: 943142

The text property on a jQuery object will always be a function. It will never be either of the stings you are testing against, so all your conditions will match. The colour will be changed to blue, then immediately changed to red.

You want to use val() not text.

Upvotes: 1

V&#237;ctor
V&#237;ctor

Reputation: 3039

Your javascript should be like this:

$(document).ready(function () {
$("#selectColor").change(function () {
    if ($(this).val() != "red") {
        document.body.style.backgroundColor = "blue";
    }
    else if ($(this).val() !="blue")
        {
        document.body.style.backgroundColor = "red";
    }
});
});

With val() you get the value of the option. If you are using "text" you get all the texts of all options, and your if breaks

Upvotes: 1

Related Questions