Tip: you can modify some code before running
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>Dynamically add and delete options in JS</title></head><body><script language="JavaScript" type="text/javascript"><!--var count1 = 0;var count2 = 0;function insertOptionBefore(num){var elSel = document.getElementById('selectX');if (elSel.selectedIndex >= 0) { var elOptNew = document.createElement('option'); elOptNew.text = 'Insert' + num; elOptNew.value = 'insert' + num; var elOptOld = elSel.options[elSel.selectedIndex]; try { elSel.add(elOptNew, elOptOld); // standards compliant; doesn't work in IE } catch(ex) { elSel.add(elOptNew, elSel.selectedIndex); // IE only }}}function removeOptionSelected(){var elSel = document.getElementById('selectX');var i;for (i = elSel.length - 1; i>=0; i--) { if (elSel.options[i].selected) { elSel.remove(i); }}}function appendOptionLast(num){var elOptNew = document.createElement('option');elOptNew.text = 'Append' + num;elOptNew.value = 'append' + num;var elSel = document.getElementById('selectX');try { elSel.add(elOptNew, null); // standards compliant; doesn't work in IE}catch(ex) { elSel.add(elOptNew); // IE only}}function removeOptionLast(){var elSel = document.getElementById('selectX');if (elSel.length > 0){ elSel.remove(elSel.length - 1);}}//--></script><form><input type="button" value="o" onclick="insertOptionBefore(count1++);" />Insert Before Selected<br /><input type="button" value="o" onclick="removeOptionSelected();" />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="o" onclick="appendOptionLast(count2++);" />Append Last www.111cn.net<br /><input type="button" value="o" onclick="removeOptionLast();" />Remove Last</form></body></html></td> </tr></table>
Tip: you can modify some code before running
