CODEWITHSUNDEEP
jquery
swserg
swserg

Reputation: 722

jquery change select box text color on action

I have a simple select:

<select id="sel" name="serchtype" style="background: rgba(0,0,0,1);">
<option value="white" style="color: white;">Type: All</option>
<option value="yellow" style="color: yellow;">Normal</option>
</select>

and jquery script that changes select box text color depending on what option value is selected

$('#sel').change( function() {
    var color = $('#sel').val();
    $('#sel').css('color',color);

});

the problem is that it changes the select text color only when I click on any object outside select box, however I need that color be changed just I select new option value. is it possible using jquery or should i look for some custom plugin?

more similar question: is it possible to make dropdown menu background in select box transparent?

UPDATE: I am using OPERA v 12 browser, in firefox/chrome no such issue.

Upvotes: 0

Views: 2074

Answers (1)

adeneo
adeneo

Reputation: 318312

You're getting the selects value and using it as colors, but all and norm aren't really colors are they, so it won't work, you need actual valid color values

<select id="sel" name="serchtype" style="background: rgba(0,0,0,1);">
    <option value="green" style="color: white;">Type: All</option>
    <option value="purple" style="color: yellow;">Normal</option>
</select>

FIDDLE

and this seems easier

$('#sel').on('change', function () {
    this.style.color = this.value;
});

Upvotes: 2

Related Questions