michael aufreiter

Your awesome tagline

0 notes

MultipleSelect Widget with Mootools

During my internship at wollzelle (Vienna / AT) we created a MultipleSelect Widget that allows to add a custom style to html multiple select boxes. And you don’t even have to hold down the CTRL-key anymore when choosing multiple items.

Basically it’s based on Bruno Torrinha’s comboBoo script.

Installing is a cakewalk.

Add the library references


<script type="text/javascript" src="javascripts/mootools.v1.11.js"/>
<script type="text/javascript" src="javascripts/multiple_select.js"/>

Define your selectbox having the multiple attribute set


<select name="countries" class="multiple_select" multiple="multiple">
    <option value="1" selected="selected">Austria</option>
    <option value="2">Czech</option>
    <option value="3">France</option>
    <option value="4">Germany</option>
    <option value="7">Italy</option>
    <option value="5">Spain</option>
    <option value="6">Switzerland</option>
</select>

Create the MultipleSelect instances


<script language="javascript">
    $$('.multiple_select').each(function(el){
        new MultipleSelect(el);
    });
</script>

demo and download

Filed under javascript