jDrop Image Combo - Turn SELECT OPTION into image drop down or combo box.
June 30, 2008 - 6:09pm — F1LT3R
jDrop -Alpha -0.3.7
jDrop turns your SELECT OPTION form elements into drop down lists that can be fully styled with CSS. Use jDrop as an image combo box or drop down list. You can add ANY xhtml element to your dropdown or combobox.
jDrop changes the value of your original form elements, making the data POST'able on submit, integrating seamlessly with your existing forms.
Demo & Zipped Code:
Try it here!
Directions: Just insert script type="text/javascript" src="js/jquery.jdrop.js" into your HEAD and write your SELECT's as follows:
<select name="animal">
<option html="<img src='gfx/dog.png' />" selected="selected">Dog</option>
<option html="<img src='gfx/cat.png' />">Cat</option>
<option html="<img src='gfx/duck.png' />">Duck</option>
<option html="<img src='gfx/fish.png' />">Fish</option>
<option html="<img src='gfx/snake.png' />">Snake</option>
</select>Currently in Alpha 0.3.7.
In development for the next version:
- Image cache support.
- Phasing out the HTML="" attribute to aviod custom DTD.
- Using ID instead of TITLE to link the drop-down with it's source element.
- Feature requests and ideas very welcome
jDrop currently uses a Custom DTD to validate but this will be phased out in the next version.