JavaScript - Select option manipulation

There are a number of scenarios when playing with bxp where you will want to insert or remove items from drop down lists, i.e. manipulation of select types.

Playing with these types requires good JavaScript skills. All too often you see in Google searches coders showing dependance on JQuery or equivalent.

Here is a cross broswer compatible suite of functions which allow manipulation of select options. Built into the example is a suite of testing functions to demonstrate the usage of the functions.

The functions here are based in part upon the examples laid out from mredkj.com ( http://www.mredkj.com/tutorials/tutorial005.html )

1 The JavaScript

<script language="JavaScript" type="text/javascript">
<!--
//Testing variables
var count1 = 0;
var count2 = 0;

//#####################################################
// For prepending a new option into a select.
//#####################################################
function fn_Select_InsertBefore ( strSelect, strText, strValue, intPosition ) {

	//If the object exists
	if (document.getElementById(strSelect)) {

		//Get the object
		var objSelect = document.getElementById(strSelect);
		
		//Create the new option to add
		var objOption = document.createElement('option');
		objOption.text = strText;
		objOption.value = strValue;
		
		//If intPosition = null the item goes at the end
		if (intPosition == null) {
			try {
				// standards compliant; doesn't work in IE
				objSelect.add(objOption, null); 
			}
			catch(ex) {
				// IE only
				objSelect.add(objOption); 
			}
		}
		else {
			//Get the reference object of the item in the select to prepend to
			var objOption_Old = objSelect.options[intPosition];
			
			//Now, try the prepend
			try {
				// standards compliant; but doesn't work in IE
				objSelect.add(objOption, objOption_Old); 
			}
			catch(ex) {
				// IE only
				objSelect.add(objOption, objSelect.selectedIndex); 
			}
		}
	}
}
//#####################################################
// For removing items from a select
//#####################################################
function fn_Select_RemovePosition ( strName, intPosition ) {

	//If the object exists
	if (document.getElementById ( strName )) {

	//Get the ojbect
		var objSelect = document.getElementById ( strName );

		//If null then we're working with the last item
		if (intPosition == null ) {
		
			//If there's something to remove
			if (objSelect.length > 0 ){
				objSelect.remove(objSelect.length - 1);
			}
		}
		else {
			if (objSelect.length >= intPosition ){
				objSelect.remove(intPosition);
			}
		}
	}
}
//#####################################################
// Current Select position
//#####################################################
function fn_Select_CurrentlySelected ( strName ) {
	var varReturn = null;
	if (document.getElementById ( strName )) {
		var objSelect = document.getElementById ( strName );
		varReturn = objSelect.selectedIndex; 
	}
	return varReturn;
}
//#####################################################
// First items
//#####################################################
function fn_Select_InsertStart( strSelect, strText, strValue ){ fn_Select_InsertBefore ( strSelect, strText, strValue, 0 ) ; }
function fn_Select_RemoveStart( strSelect ){ fn_Select_RemovePosition ( strSelect, 0 ) ; }
//#####################################################
// Last items
//#####################################################
function fn_Select_InsertEnd( strSelect, strText, strValue ){ fn_Select_InsertBefore ( strSelect, strText, strValue, null ) ; }
function fn_Select_RemoveEnd( strSelect ){ fn_Select_RemovePosition ( strSelect, null ) ; }
//#####################################################
// Selected items
//#####################################################
function fn_Select_InsertSelected( strSelect, strText, strValue ){ fn_Select_InsertBefore ( strSelect, strText, strValue, fn_Select_CurrentlySelected ( strSelect ) ) ; }
function fn_Select_RemoveSelected( strSelect ){ fn_Select_RemovePosition ( strSelect, fn_Select_CurrentlySelected ( strSelect ) ) ; }


//-->
</script>

2 The HTML

<form>
	<input type="button" value="&raquo;" onclick="count1++; fn_Select_InsertStart ( 'selectX', count1, count1);" />
	Insert First<br />
	<input type="button" value="&raquo;" onclick="fn_Select_RemoveStart ( 'selectX' );" />
	Remove First<br />
	<input type="button" value="&raquo;" onclick="count1++; fn_Select_InsertSelected ( 'selectX', count1, count1);" />
	Insert Before Selected<br />
	<input type="button" value="&raquo;" onclick="fn_Select_RemoveSelected( 'selectX' );" />
	Remove Selected<br />
	<select id="selectX" size="10" multiple="multiple">
		<option value="original1" selected="selected">Orig1</option>
		<option value="original2">Orig2</option>
	</select>
	<br />
	<input type="button" value="&raquo;" onclick="count2++; fn_Select_InsertEnd ( 'selectX', count2, count2);" />
	Insert last<br />
	<input type="button" value="&raquo;" onclick="fn_Select_RemoveEnd( 'selectX' );" />
	Remove Last
</form>