TomRed.net

This functionality has proven useful on a number of occasions, especially when used with JavaScript Moving option elements between HTML select lists. You want to reorder the elements of an HTML select statement. This can easily be achieve using the follow JavaScript. I have provide a file download for you to quickly add this to your application. You can add this file at the top of the HTML page using

<script type="text/javascript" src="/js/reorderSelect.js"></script>

This script contains two functions moveUp and moveDown. These names are self explanatory. When the user selects the up button the associated action moveUp is operated. Similarly when the user selects the down button the associated action moveDown is operated.

<script type="text/javascript">
function moveUp(selectId) {
	var selectList = document.getElementById(selectId);
	var selectOptions = selectList.getElementsByTagName('option');
	for (var i = 1; i < selectOptions.length; i++) {
		var opt = selectOptions[i];
		if (opt.selected) {
			selectList.removeChild(opt);
			selectList.insertBefore(opt, selectOptions[i - 1]);
		}
       }
}

function moveDown(selectId) {
	var selectList = document.getElementById(selectId);
	var selectOptions = selectList.getElementsByTagName('option');
	for (var i = selectOptions.length - 2; i >= 0; i--) {
		var opt = selectOptions[i];
		if (opt.selected) {
		   var nextOpt = selectOptions[i + 1];
		   opt = selectList.removeChild(opt);
		   nextOpt = selectList.replaceChild(opt, nextOpt);
		   selectList.insertBefore(nextOpt, opt);
		}
       }
}
</script>

To make this work in my example below I have creates a select statement called selected. I have added two images each calls one of the functions above using onclick:onclick="moveUp('selected')". The id of the select statement in this case selected is passed in the fucntion call.

Select Order<br />
<select id="selected" name="selected" size="5" multiple="multiple">
	<option>option 1</option>
	<option>option 2</option>
	<option>option 3</option>
	<option>option 4</option>
	<option>option 5</option>
</select>
<div class="div" style="margin-top: 50px;margin-left: 25px;width: 50px;">
	<img src="Defined Search/moveup.gif" alt="Move Up" onclick="moveUp('selected')" onmouseover="style.cursor=pointer;" /><br />
	<img src="Defined Search/movedn.gif" alt="Move Down" onclick="moveDown('selected')" />
</div>

Example