My dropdown menu appears like this:-
<select id="fruits">
<option value="-1">Select</option>
<option value="1">Banana</option>
<option value="2">Apple</option>
<option value="3">Grapes</option>
</select>
I want to customize the style of one of the options using jQuery's .css property, but it is not behaving as expected in IE11 or Firefox. Here is my jQuery code snippet:-
$("#fruits").change(function () {
$(this).css("background-color", "transparent");
$(this).find('option').css("background-color", "transparent");
var selectedVal = $(this).find('option:selected');
if (selectedVal != "-1")
{
console.log("Before->" + $(this).find('option:selected').css("background-color"));
$(this).find('option:selected').css("background-color", "#BEF781");
console.log("After->" + $(this).find('option:selected').css("background-color"));
}
});
The issue with this code is that although it updates the DOM (as confirmed through developer tools and Firebug), when trying to retrieve the value of background-color, it returns the old value rgb(51, 153, 255) instead of the updated rgb(190, 247, 129), and it doesn't update the color in IE11. While this code previously worked in IE7, I am now aiming for it to function correctly in IE11. Any suggestions on what I should do?
P.S. - This functionality works smoothly in JSFiddle, which has been verified. However, I need it to work specifically in IE11.