JQuery: Button to cycle through select options
I wanted an html drop-down list to automatically appear as a simple button that changes color on every click as it cycles through the option values of the (hidden) select element.
The code sample is in this jsfiddle. It uses JQuery.
For each relevant select element, it styles the associated label so it looks like a button, hides the select element and handles clicks on the label button by cycling through the select options.
The display text of each option is used as a tooltip (‘title’ attribute) of the button which also serves as a css selector to color the button according to currently selected option.
The button styling requires CSS3, so IE8 is not suitable. I have tested this successfully in Firefox 33 and IE11.