The most unlogical element in any web form must be the multiple-select! When more than one element is selected, you might just not see it, if they are too far away from eachother in the list. And how do you select more then one item?! Yes, we know, but the average visitor doesn't know you need to push the CTRL button while clicking more than one item. And what about the option to show a multiple-select, but it can only have one highlight?! (<select size="3">..</select>) Well, enough ranting.
I created multipleSelectPicker, a javascript plugin built on jQuery which converts all available multiple-selects on a web page into 2 multiple-selects with add and remove buttons. The example underneath has a 'do it now' button, so you can see the actual change happening:
Installation into your website is very simple. Just add the javascript file and a few lines of javascript:
<head>
<!-- include the jQuery framework -->
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<!--include the MultipleSelectPicker.js file -->
<script type="text/javascript" src="MultipleSelectPicker.js"></script>
<!-- activate the MultipleSelectPicker functionality on-document-ready -->
<script type="text/javascript">
var multipleSelectPicker = new MultipleSelectPicker();
$(document).ready(function(){
// change 'default' to 'nl' for dutch language buttons
multipleSelectPicker.init('default');
});
</script>
Update: a small enhancement was made, which causes the 'doubled' multiple selects (on the left side) to have a <select name="_x_"> instead of an empty name.
- check out the test html file
- Download the code: multipleSelectPicker.zip
- MultipleSelectPicker.js, or view the source
Options
Double-click select: when double-clicking an option, it is selected/deselected.
Multi-lingual: add 'nl' to the init() argument, to have the buttons appear in Dutch. You are off course welcome to do a bit of translation yourself; see the javascript source file.
Order remains: the options will always remain in the order as they were at the beginning. So even if you pick option 5 first and then option 2, the number 2 will be above number 5. This is not done alphabetically, but with the initial order of the options.
If you're using the code, leave me a comment :-)
Recent Comments