Posts Tagged ‘listbox

29
Dec
09

Listbox Picker using Javascript

This page is about creating an HTML Switchlist or Picker using Javascript.

Background

Listbox pickers are 2 listboxes with left move and right move buttons in between them. Items in each listbox can be added or removed from each other.

Requirements

  • Basic Text Editor
  • HTML Browser

Implementation

In order to accomplish this the 2 lists are displayed as html select elements. Each item on the list is an option element. When the user clicks on one of the 2 buttons a javascript call is made.

The javascript is responsible for moving selected items from the source to the target select element. The javascript function goes thru the following  process.

  1. Create a temporary arrays and a map for the source and target select boxes.
  2. Copy all the elements from the target listbox to the target temp array
  3. Copy all the selected items from the source listbox to the temp target array.
  4. Copy all the unselected elements from the source listbox to the source temp array.
  5. Clear out the listboxes and regenerate them using the target and source arrays.
  6. Assign the values of each element using the map structure.
<script language="JavaScript" type="text/JavaScript">
function moveItems(srcSelect, targetSelect) {
	var srcTmpArr = new Array();
	var targetTmpArr = new Array();
	// map type structure that stores the value of a entry given its display text.
	var valStoreMap = new Array();
	var i;
	// iterate thru the target select box and store all the values and
	// display text into a Map type structure. All values because this
	// is the target.
	for (i = 0; i < targetSelect.options.length; i++) {
		// need to hold on to value of item so we load up the map with value from target.
		valStoreMap[targetSelect.options[i].text] = targetSelect.options[i].value;
		targetTmpArr[i] = targetSelect.options[i].text;
	}
	// get the length of the target Arr that we populated above.
	// this is faster than doing a targetLength++ each time in the loop.
	var targetLength = targetTmpArr.length;

	// next we start working on the source array. This is tricky since
	// the selected items in the list will need to be MOVED over to
	// the target array. Unselected items remain behind.

	// start from a fresh source array.
	var srcLength = 0;
	// iterate thru the source structure and store all the values.
	for (i = 0; i < srcSelect.options.length; i++) {
		// need to hold on to value of item so we load up the map with value from source.
		valStoreMap[srcSelect.options[i].text] = srcSelect.options[i].value;

		// if something in the source is selected and its not blank then
		// copy it to the target Temp Array.
		if (srcSelect.options[i].selected && srcSelect.options[i].value != "") {
			targetTmpArr[targetLength] = srcSelect.options[i].text;
			targetLength++;
		} else {
			// else just add it to the source Temp array as if nothing happend.
			srcTmpArr[srcLength] = srcSelect.options[i].text;
			srcLength++;
		}
	}
	srcTmpArr.sort();
	targetTmpArr.sort();
	// reset the source and target select boxes to prepare them for copy.
	srcSelect.length = 0;
	targetSelect.length = 0;

	// populate the select boxes with the new values from the temp arrays.
	var i;
	for (i = 0; i < srcTmpArr.length; i++) {
		var optionItem = new Option();
		// lookup the value of the option Item from the map
		optionItem.value = valStoreMap[srcTmpArr[i]];
		optionItem.text = srcTmpArr[i];
		srcSelect[i] = optionItem;
	}
	for (i = 0; i < targetTmpArr.length; i++) {
		var optionItem = new Option();
		// lookup the value of the option Item from the map
		optionItem.value = valStoreMap[targetTmpArr[i]];
		optionItem.text = targetTmpArr[i];
		targetSelect[i] = optionItem;
	}
}

function selectAll(box) {
	for (var i = 0; i < box.length; i++) {
		box[i].selected = true;
	}
}
</script>

The following is the code to generate the 2 listboxes and the buttons between them.

		<table border="0" cellspacing="2" cellpadding="0">
			<tr align="center" valign="middle">
				<td align="right"><select name="FirstList" size="15" multiple
					id="FirstList" style="width: 250">
					<option value="A">Bob</option>
					<option value="B">Ted</option>
					<option value="C">John</option>
					<option value="D">Greg</option>
					<option value="E">Steve</option>
					<option value="F">Mike</option>
				</select></td>
				<td><input type="button"
					onClick="moveItems(this.form.SecondList,this.form.FirstList)"
					value="<<" style="height:50"> <input type="button"
					onClick="moveItems(this.form.FirstList,this.form.SecondList)"
					value=">>" style="height: 50"></td>
				<td align="left"><select name="SecondList" size="15" multiple
					id="SecondList" style="width: 250">
				</select></td>
			</tr>
			<tr align="center" valign="middle">
				<td colspan="3"><input type="submit" name="Submit"
					value="Submit" style="width: 250" class="button"
					onClick="selectAll(document.form1.SecondList);"></td>
			</tr>
		</table>

One thing to note here is that when the form submits all items on the second list are selected. This is the only way the items will be submitted as part of the form.

Thats all for now.

Advertisements



Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 77 other followers

September 2017
S M T W T F S
« Mar    
 12
3456789
10111213141516
17181920212223
24252627282930

Blog Stats

  • 830,829 hits