原址:http://www.mredkj.com/tutorials/tutorial005.html
HTML/JavaScript - Select list - Add/Remove Options (DOM)
select, options, insert, remove, append last, remove last
Using a technique that works in DOM compliant browsers
Tutorial005 - Try It
Select
样式:(本页中操作不起作用,只为原型,其脚与html请看 示例下一个)
Insert Before Selected
Remove Selected
Append Last
Remove Last
The JavaScript
<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>
The HTML
<form> <input type="button" value="o" οnclick="insertOptionBefore(count1++);" /> Insert Before Selected<br /> <input type="button" value="o" οnclick="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" οnclick="appendOptionLast(count2++);" /> Append Last<br /> <input type="button" value="o" οnclick="removeOptionLast();" /> Remove Last </form>