Unobtrusively add style to your drop down boxes, leaving them to work almost exactly as before.

introduction

Needless to say, this site will look better in anything other than Internet Explorer, and so will the plugin, unless you change the css. For eaxmple I have used rounded corners and transparent png's. Not vey Internet Explorer friendly.

The only thing that will differ is that if you change the value of the select box using jQuery's val() function to change the value. This will not be picked up as a change by the plugin.

However, most things will stay the same:

• Form will still submit in the same way.
• onchange events whether attached by jQuery, or specified inline, will still fire.
• The original <select> is hidden but updated, so you can query it with jQuery in exactly the same way as usual, eg. $('select :selected').doSomething();, etc...

download

The download contains the script, the css, and this example page.

jquery.superselect-0.1.zip

todo

• handling of multiple (i.e. more than one value selectable) select boxes.

html

    <select id='theselect' onchange='$("#test").html("Select value is: "+$(this).val());'>

        <option value='' rel='icon[silk/help.png]'>Choose a Flag...</option>
        <option value='blue' rel='icon[silk/flag_blue.png]'>Blue Flag</option>
        <option value='green' rel='icon[silk/flag_green.png]'>Green Flag</option>
        <option value='red' rel='icon[silk/flag_red.png]'>Red Flag</option>

        <option value='yellow' rel='icon[silk/flag_yellow.png]'>Yellow Flag</option>
        <option value='orange' rel='icon[silk/flag_orange.png]'>Orange Flag</option>
    </select><p id='test'>Select value is: </p>
    <input type='button' onclick='$.fn.superselect.reset("theselect");' 
        value='reset selectbox' />

javascript

   $(function(){ $('#theselect').superselect(); });