CODEWITHSUNDEEP
jqueryhtmlcss
mydeve
mydeve

Reputation: 563

dropdown with backgrounds as option show selected

I have dropdown with different background as option like red, blue and green.

I want that when someone selects the green color it will be green and like so. How can I do this?

Below is my html code:

<select name="mcolor" class="form-control" id="mcolor">
  <option value="">-- select color --</option>																				         <option value="#ff0000" style="background-color:#ff0000">&nbsp;</option>						
  <option value="#ffffff" style="background-color:#ffffff">&nbsp;</option>														</select>

Upvotes: 0

Views: 66

Answers (3)

user2633451
user2633451

Reputation: 126

try this

    $('.form-control').on('change', function() {
      $(this).css('background-color', $(this).val());
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="mcolor" class="form-control" id="mcolor">
        <option value="red">-- red --</option>  
        <option value="green">-- green --</option>  
        <option value="black">-- black --</option>  
        </select>

Upvotes: 0

SatyaTNV
SatyaTNV

Reputation: 4135

function colourFunction() {
var myselect = document.getElementById("select1"),
colour = myselect.options[myselect.selectedIndex].className;
myselect.className = colour;
myselect.blur(); 
}
#select1 {width:150px; color:rgba(0, 0, 0, 0);}
#select1:focus, #select1:focus {
color:black;
}
.white {background:white;}
.red {background:red;}
.yellow {background:yellow;}
.green {background:green}
<select id="select1" onchange="colourFunction()">
<option class="white" value="A">This should have a WHITE background</option>
<option class="red" value="B">This should have a RED background</option>
<option class="yellow" value="C">This should have a YELLOW background</option>
<option class="green" value="D">This should have a GREEN background</option>
</select>

Upvotes: 0

Ahs N
Ahs N

Reputation: 8366

This is how to change the background color on select:

$("#mcolor").change(function(){
    $('body').css("background-color", $(this).val());
});

JSFiddle demo here

Upvotes: 1

Related Questions