22 Jul
Last week looking for a list box that allows to select multiple items I found a very useful jQuery plugin called Dual Listbox. As the author describes it, it allows us “to have two <select> elements, and be able to easily transfer <option> elements between them…”
This is the list of the features:
Ability to either move items from one list to another or copy items from one list to another
List filtering, including a display of how many items are showing out of the total
Moving a list of selected items from one list to the other with a button.
Moving all items from one list to another with a button.
Moving single items by double-clicking on them.
All you have to do is and give the elements the control ids. After that, a simple javascript statement takes care of everything else.
Here’s a simple example of the HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <div>
<table>
<tr>
<td>
Filter: <input type="text" id="box1Filter" /><button type="button" id="box1Clear">X</button><br />
<select id="box1View" multiple="multiple" style="height:300px;width:300px;">
<option value="1">item one</option>
<option value="2">item two</option>
<option value="3">item three</option>
<option value="4">item four</option>
<option value="5">item five</option>
</select><br/>
<span id="box1Counter" class="countLabel"></span>
<select id="box1Storage">
</select>
</td>
<td>
<button id="to2" type="button"> > </button>
<button id="allTo2" type="button"> >> </button>
<button id="allTo1" type="button"> << </button>
<button id="to1" type="button"> < </button>
</td>
<td>
Filter: <input type="text" id="box2Filter" /><button type="button" id="box2Clear">X</button><br />
<select id="box2View" multiple="multiple" style="height:300px;width:300px;">
</select><br/>
<span id="box2Counter" class="countLabel"></span>
<select id="box2Storage">
</select>
</td>
</tr>
</table>
</div> |
and the javascript part could be something like this:
1 2 3 | $(document).ready(function(){ $.configureBoxes(); }); |
The plugin can be configured by adding a JSON object as the options parameter. The list of the available options is here
You can find a demonstration of the plugin here
For more information please refer to the project’s home page
. Why does it always have to behave different? We don’t know. Sometimes we miss a small detail in our code but some others, IE just want to mess with us.