Logo
doctype [?]
[strict] [loose] [none]

Selectbox Utility Functions


Moving Values Between Select Boxes

(See also the Option Transfer library for a better way to create this type of interface)

Do not allow moving of options matching pattern:
autosort







<view/hide code>
<table class="example" border=0>
<tr>
 <td>
  <select name="list1" multiple size=10
   onDblClick="Selectbox.moveSelectedOptions(this.form.list1,this.form.list2,this.form.movesort.checked,this.form.movepattern1.value)">
   <option value="Matt">Matt</option>
   <option value="Bill">Bill</option>
   <option value="Bob">Bob</option>
   <option value="Jane">Jane</option>
   <option value="Mary">Mary</option>
  </select>
 </td>
 <td>
  <input type="button" name="right" value="&gt;&gt;"
   onClick="Selectbox.moveSelectedOptions(this.form.list1,this.form.list2,this.form.movesort.checked,this.form.movepattern1.value)"><br><br>
  <input type="button" name="right" value="All &gt;&gt;"
   onClick="Selectbox.moveAllOptions(this.form.list1,this.form.list2,this.form.movesort.checked,this.form.movepattern1.value)"><br><br>
  <input type="button" name="left" value="&lt;&lt;"
   onClick="Selectbox.moveSelectedOptions(this.form.list2,this.form.list1,this.form.movesort.checked,this.form.movepattern1.value)"><br><br>
  <input type="button" name="left" value="All &lt;&lt;"
   onClick="Selectbox.moveAllOptions(this.form.list2,this.form.list1,this.form.movesort.checked,this.form.movepattern1.value)">
 </td>
 <td>
  <select name="list2" multiple size=10
   onDblClick="Selectbox.moveSelectedOptions(this.form.list2,this.form.list1,this.form.movesort.checked,this.form.movepattern1.value)">
   <option value="George">George</option>
   <option value="Fred">Fred</option>
   <option value="Ryan">Ryan</option>
   <option value="Angela">Angela</option>
   <option value="Jill">Jill</option>
  </select>
 </td>
</tr>
</table>


Copying Values Between Select Boxes

autosort







<view/hide code>
<table class="example" border=0>
<tr>
 <td>
  <select name="copylist1" multiple size=10
   onDblClick="Selectbox.copySelectedOptions(this.form.copylist1,this.form.copylist2,this.form.copysort.checked)">
   <option value="Matt">Matt</option>
   <option value="Bill">Bill</option>
   <option value="Bob">Bob</option>
   <option value="Jane">Jane</option>
   <option value="Mary">Mary</option>
   <option value="George">George</option>
   <option value="Fred">Fred</option>
   <option value="Ryan">Ryan</option>
   <option value="Angela">Angela</option>
   <option value="Jill">Jill</option>
  </select>
 </td>
 <td>
  <input type="button" name="right" value="&gt;&gt;"
   onClick="Selectbox.copySelectedOptions(this.form.copylist1,this.form.copylist2,this.form.copysort.checked)"><br><br>
  <input type="button" name="right" value="All &gt;&gt;"
   onClick="Selectbox.copyAllOptions(this.form.copylist1,this.form.copylist2,this.form.copysort.checked)"><br><br>
  <input type="button" name="left" value="&lt;&lt;"
   onClick="Selectbox.copySelectedOptions(this.form.copylist2,this.form.copylist1,this.form.copysort.checked)"><br><br>
  <input type="button" name="left" value="All &lt;&lt;"
   onClick="Selectbox.copyAllOptions(this.form.copylist2,this.form.copylist1,this.form.copysort.checked)">
 </td>
 <td>
  <select name="copylist2" multiple size=10
   onDblClick="Selectbox.copySelectedOptions(this.form.copylist2,this.form.copylist1,this.form.copysort.checked)">
   <option value="Matt">Matt</option>
   <option value="Mary">Mary</option>
   <option value="Angela">Angela</option>
  </select>
 </td>
</tr>
</table>


Moving Options Up And Down



<view/hide code>
<table border="0" class="example">
<tr>
	<td>
	<select name="updownlist" size="7" multiple>
		<option value="Option 1"> Option 1
		<option value="Option 2" selected> Option 2
		<option value="Option 3"> Option 3
		<option value="Option 4" selected> Option 4
		<option value="Option 5"> Option 5
	</select>
	</td>
	<td>
	<input type="button" value="&nbsp;Up&nbsp;" onClick="Selectbox.moveOptionUp(this.form.updownlist)">
	<br><br>
	<input type="button" value="Down" onClick="Selectbox.moveOptionDown(this.form.updownlist)">
	</td>
</tr>
</table>


Selecting Options By Regular Expression


Select Matching Options:
Select ONLY Matching Options:
Un-Select Matching Options:

<view/hide code>
Select Matching Options: <input type="text" name="pattern1" value="^\w+$">
<input type="button" name="selectmatching1" value="Select" onClick="Selectbox.selectOptions(this.form.selectmatching,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(this.form.selectmatching,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(this.form.selectmatching,this.form.pattern3.value)">
<br>
<input type="button" name="selectall" value="Select All Options" onClick="Selectbox.selectAllOptions(this.form.selectmatching)">
<br>