harvesthq/chosen — Issue #482: Retain classes used by select tag and option tag
Author: timbrew
Created: 2012-02-06 11:43:51+00:00
State: open

If my options have classes and my select has classes say with a background color then these same classes need to be applied to chosen. I have 3 classes pri-1 (background green) pri-2 (background orange) and pri-3 (background red).

I've managed to get this working but its not very clean:

Firstly, I added an on change function within my init js so that when I select a 1 2 or 3 it adds the class to the span of the select.

$('select').chosen().change(
function() {

//set the class of the real select to the options class
$(this).attr('class','pri-'+$(this).val())

//add the chzn-done class and the class from the option
$('#'+$(this).attr('id')+'_chzn span').attr('class','chzn-done '+$(this).attr('class'));

} );

Then to get them working from page load I added this to line 310 of chosen.js.

//get the selects original classes and apply to chosen
var def_sel_id = this.container_id.replace('_chzn','');
var def_class = $('#'+def_sel_id).attr('class');
container_div.html('' + this.default_text + '

');

Works a treat but I think there is probably a better way to do this. By default we should be able to drop chosen over the top and have it work the same, this would complete the picture for me.

Amazing work by the way!!!!