Google

Monday, September 24, 2007

JavaScript Select Box Filter

Today’s link of the “Oh I don’t want to spend all day coding this stuff myself” day goes to the Matt Kruse’s JavaScript Toolbox.
http://www.javascripttoolbox.com/lib/selectbox/index.php

What I need is some JavaScript that allows me to select options from a multi option select box.
Checking out the examples and the “Selecting Options By Regular Expression” is exactly what I am after.

The Site has many other great resources I think I will find some use for, as this site would of probably got lost in my del.icio.us book marks.

Now the problem I had was with a Multiple Select box it uses an array, like this example.


....
<select name="selectids[]" size="10" multiple="multiple">
<option value="1" selected="selected">Value 1</option>
<option value="2" selected="selected">Value 2</option>
</select>
....


Now I couldn't just pass the value "selectids" as that doesn't exist, so you need to use array notation instead.
eg : document.forms[0]['selectids[]']

So this is the example I now used


<script type="text/javascript" src="/selectbox.js"></script>
Select Matching Options: <input type="text" name="pattern1" value="^\w+$">
<input type="button"
name="selectmatching1"
value="Select"
onClick="Selectbox.selectOptions(document.forms[0]['selectids[]'],this.form.pattern1.value)">
<br>
Select ONLY Matching Options: <input type="text" name="pattern2" value="^\w+$">
<input type="button"
name="selectmatching2"
value="Select"
onClick="Selectbox.selectOnlyOptions(document.forms[0]['selectids[]'],this.form.pattern2.value)">
<br>
Un-Select Matching Options: <input type="text" name="pattern3" value="^\w+$">
<input type="button"
name="selectmatching3"
value="Select"
onClick="Selectbox.unselectOptions(document.forms[0]['selectids[]'],this.form.pattern3.value)">
<br>
<input type="button"
name="selectall"
value="Select All Options"
onClick="Selectbox.selectAllOptions(document.forms[0]['selectids[]'])">
<br>


Which now works the way I want it to.

No comments: