Logo
Navigation
Home Libraries Gadgets Best Practices jQuery Tips Support Resources / Links JS Knowledge Base Donate! About Me AJAX Toolbox
Libraries
Calendar Popup Checkbox Group Data Dumper Data Validation Date Functions DHTML Tree Draggable Iframes Dependent Select Boxes Form Functions Object Position Option Transfer Popups (In-Page DIV) Selectbox Functions Table Sorting And Utils Util/DOM/CSS/Event
doctype [?]
[strict] [loose] [none]

Selectbox Utility Functions
Examples

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>
Logo All Contents Copyright © Matt Kruse