How to obtain css property value of an item in a select using jquery

Question

I am trying to fetch the color of a list item on clicking it. I want to put some constraint on it when the color is red, say. How to do it,I am not getting it.

if($("#listbox option:selected").css("color")=="red"){
}

I have a listbox with some items of red color. I want to stop user from selecting those red color items.

Please help me.

@Aamir Afridi actually the css is attached dynamically using jquery. it is not in static code. — edge, May 22 '14 at 10:37
`.css('color')` will give you an rgb value, try adding data attributes to your option and use that instead - http://jsfiddle.net/SMLUS/ — Pete, May 22 '14 at 10:49
@Aamir it does not work , if there is no item with red at beginning. — edge, May 22 '14 at 11:00

score 1 · Accepted Answer · edited May 23 '17 at 12:27

As Pete suggested, use data attribute which is better and easy way: http://jsfiddle.net/aamir/tq9W8/5/

$('#listbox option:eq(0)').css('color', 'red').data('color', 'red');

$('#listbox').change(function () {
    if ($(this).find("option:selected").data('color') == 'red') {
        alert('color is red');
    } else {
        alert('other options');
    }
});

or you can try this: http://jsfiddle.net/aamir/tq9W8/4/

$('#listbox option:eq(0)').css('color', 'red');

function checkColorByName(ele, colorName) {
    var tempDiv = $('<div>').css("color", colorName).hide().appendTo('body');
    console.log(tempDiv.css('color'));
    var bol = tempDiv.css('color') == ele.css('color');
    tempDiv.remove();
    return bol;
}


$('#listbox').change(function () {
    if (checkColorByName($(this).find("option:selected"), 'red')) {
        alert('color is red');
    } else {
        alert('other options');
    }
});

Other wise according to this, you need to use a plugin.

related http://stackoverflow.com/questions/1740700/how-to-get-hex-color-value-rather-than-rgb-value — Aamir Afridi, May 22 '14 at 11:39

score 0 · Answer 2 · answered May 22 '14 at 10:30

0

Your code is good.

If it's not working, do console.log($("#listbox option:selected").css("color")=="red");

If it says undefined, the color attribute is not set on the option, but maybe on the #listbox. (Try $("#listbox option:selected").parent().css("color")=="red"))

answered May 22 '14 at 10:30

FLX

2,626
4
26
57

He to find a way to get option color and compare with the color name. read my answer for details and also Pete detail under the question :) – Aamir Afridi May 22 '14 at 11:41

How to obtain css property value of an item in a select using jquery

2 Answers2