Question

There are a few plugins ( selectmenu, dropkick, chosen, and probably many more ) that turn tag combo-box into a prettier, styled, more functional version.

I’d like to style the extended tag with ui-state-error style. This sporadically works sometimes, but most of the time it doesn’t:

$('select').selectmenu().addClass('ui-state-error');

And even when it works, removeClass(‘ui-state-error’) doesn’t work.

So, what is the correct way to addClass(‘ui-state-error’) to one of these extended combo-boxes?

Answer 1

See my JSFiddle here.

From what I can see, you should use the following:

 $('select').selectmenu();
 $('.ui-selectmenu').addClass('ui-state-error');

This will achieve the effect you desire, but it’s going to cause an issue when you have multiple selects on the page. This is where you get into the specific of each implementation. As for selectmenu, it seems you should be able to do the following:

 id = $('select')[0].id;
 $('#' + id + '-button').addClass('ui-state-error');

But, that’s very specific on a plugin with very little documentation. Feel free to use this as a jumping off point. Enjoy!