http://snippets.dzone.com/posts Thu, 21 Aug 2008 01:10:56 GMT DZone Snippets: add code http://snippets.dzone.com/posts/show/4442 from http://www.mredkj.com/tutorials/tutorial005.html <br /> <br /> <br />Overview <br /> <br /> * Insert Before Selected - A new option is created and added above the selected option (as determined by selectedIndex). If none are selected, then no option is added. <br /> * Remove Selected - Deletes the selected option (or options) from the list. If no options are selected, no options are deleted. <br /> * Append Last - No matter what is selected, a new option is added at the end. <br /> * Remove Last - No matter what is selected, the last option is deleted from the list. <br /> <br /> <br />Explanation <br /> <br />According to DOM Level 1, the following is the syntax for the add and remove methods in HTMLSelectElement: <br /> <br />void add(in HTMLElement element, in HTMLElement before) raises(DOMException); <br />void remove(in long index); <br /> <br />The add method takes two arguments: the element to add, and the element to insert before. The spec also says you can add to the end of the list by passing null as the second argument. <br /> <br />The remove method just takes a number: the index of the option to be removed. <br /> <br /> <br />The JavaScript <br /><code> <br /><script language="JavaScript" type="text/javascript"> <br /><!-- <br />var count1 = 0; <br />var count2 = 0; <br /> <br />function insertOptionBefore(num) <br />{ <br /> var elSel = document.getElementById('selectX'); <br /> if (elSel.selectedIndex >= 0) { <br /> var elOptNew = document.createElement('option'); <br /> elOptNew.text = 'Insert' + num; <br /> elOptNew.value = 'insert' + num; <br /> var elOptOld = elSel.options[elSel.selectedIndex]; <br /> try { <br /> elSel.add(elOptNew, elOptOld); // standards compliant; doesn't work in IE <br /> } <br /> catch(ex) { <br /> elSel.add(elOptNew, elSel.selectedIndex); // IE only <br /> } <br /> } <br />} <br /> <br />function removeOptionSelected() <br />{ <br /> var elSel = document.getElementById('selectX'); <br /> var i; <br /> for (i = elSel.length - 1; i>=0; i--) { <br /> if (elSel.options[i].selected) { <br /> elSel.remove(i); <br /> } <br /> } <br />} <br /> <br />function appendOptionLast(num) <br />{ <br /> var elOptNew = document.createElement('option'); <br /> elOptNew.text = 'Append' + num; <br /> elOptNew.value = 'append' + num; <br /> var elSel = document.getElementById('selectX'); <br /> <br /> try { <br /> elSel.add(elOptNew, null); // standards compliant; doesn't work in IE <br /> } <br /> catch(ex) { <br /> elSel.add(elOptNew); // IE only <br /> } <br />} <br /> <br />function removeOptionLast() <br />{ <br /> var elSel = document.getElementById('selectX'); <br /> if (elSel.length > 0) <br /> { <br /> elSel.remove(elSel.length - 1); <br /> } <br />} <br />//--> <br /></script> <br /></code> <br /> <br /> <br />The HTML <br /><code> <br /><form> <br /><input type="button" value="o" onclick="insertOptionBefore(count1++);" /> <br />Insert Before Selected<br /> <br /><input type="button" value="o" onclick="removeOptionSelected();" /> <br />Remove Selected<br /> <br /><select id="selectX" size="10" multiple="multiple"> <br /><option value="original1" selected="selected">Orig1</option> <br /><option value="original2">Orig2</option> <br /></select> <br /><br /> <br /><input type="button" value="o" onclick="appendOptionLast(count2++);" /> <br />Append Last<br /> <br /><input type="button" value="o" onclick="removeOptionLast();" /> <br />Remove Last <br /></form> <br /></code> <br /> Wed, 22 Aug 2007 12:39:41 GMT http://snippets.dzone.com/posts/show/4442 bradalyst (brad)