jquery Chosen Higlight option in Multiselect

Question

in the great jquery Chosen plugin (http://harvesthq.github.io/chosen/) is it possible to highlight an option within an multiselect. An image will say more than a description:

EDIT: Sorry for the unclear question. It would be great if the highlight fires by a givven attribute in the option tag. f.e. a class name or a "name"

<option value="xyz" selected="selected" class="active" name="active">item</option>

Thanks,

t book

Answer 1

Try this,

CSS

.active{
    background : #FF0 !important;
}

SCRIPT

$("select").chosen().change(function(){
    $('li.search-choice').removeClass('active');
    $('li.search-choice:last').addClass('active');
});

Live Working Demo

Answer 2

You could do something like what you are looking for with css:

.chosen-container-multi .chosen-choices li.search-choice.emphasize {
    background-image: linear-gradient(#FFEDB5 20%, #FFAE03 50%, #E09B1F 52%, #DBAD4B 100%);
    background-color: #C9AB11;
}

The only other thing you would need to do is select the element you want to highlight and emphasize by adding the class emphasize. To highlight requires some code I haven't shown but it shouldn't be too hard to create. Best of luck!

Answer 3

I believe you want to color the last multiselect menu. You can use:

$('ul.chosen-choices .search-choice:last span').css('background-color','yellow')

Answer 4

You can use toogleClass like in this working demo.

Like:

$('#target').toggleClass('toggled');

and in your css, use different color for element with toggled class.