HTML Element
1. select1) Clear Select Options Fast
//ref: http://www.somacon.com/p542.php//The following Javascript functions are hereby granted to the public domain. Read below for how to implement these functions.// Standard javascript function to clear all the options in an HTML select element// In this method, you provide the id of the select dropdown boxfunction ClearOptions(id){document.getElementById(id).options.length = 0;}// Standard javascript function to clear all the options in an HTML select element// In this method, you just provide the form name and dropdown box namefunction ClearOptionsAlt(FormName, SelectName){document.forms.elements.options.length = 0;}// Fast javascript function to clear all the options in an HTML select element// Provide the id of the select element// References to the old <select> object will become invalidated!// This function returns a reference to the new select object.function ClearOptionsFast(id){var selectObj = document.getElementById(id);var selectParentNode = selectObj.parentNode;var newSelectObj = selectObj.cloneNode(false); // Make a shallow copyselectParentNode.replaceChild(newSelectObj, selectObj);return newSelectObj;}// This is an alternative, simpler method.Thanks to Victor T.// It does not appear to be as fast as the ClearOptionsFast method in FF 3.6.function ClearOptionsFastAlt(id){document.getElementById(id).innerHTML = "";} 2) Add/remove options to/from a select list
//ref: http://blog.pothoven.net/2006/10/addremove-options-tofrom-select-list.html// addSelectOption//// Add the single select option to the selection list with the id specified//function addSelectOption(selectId, value, display) { if (display == null) {display = value; } var anOption = document.createElement('option'); anOption.value = value; anOption.innerHTML = display; document.getElementById(selectId).appendChild(anOption); return anOption;}// removeSelectOption//// Remove the option with the specified value from the list of options// in the selection list with the id specified//function removeSelectOption(selectId, value) { var select = document.getElementById(selectId); var kids = select.childNodes;var numkids = kids.length;for (var i = 0; i < numkids; i++) { if (kids.value == value) { select.removeChild(kids); break; } }} 3)Move options up and down select lists
<select id="orderedList" multiple="multiple"></select><img src="moveup.gif" alt="Move Up"/><img src="movedown.gif" alt="Move Down"/>// moveOptionsUp//// move the selected options up one location in the select list//function moveOptionsUp(selectId) { var selectList = document.getElementById(selectId); var selectOptions = selectList.getElementsByTagName('option'); for (var i = 1; i < selectOptions.length; i++) {var opt = selectOptions;if (opt.selected) { selectList.removeChild(opt); selectList.insertBefore(opt, selectOptions); } }}// moveOptionsDown//// move the selected options down one location in the select list//function moveOptionsDown(selectId) { var selectList = document.getElementById(selectId); var selectOptions = selectList.getElementsByTagName('option'); for (var i = selectOptions.length - 2; i >= 0; i--) {var opt = selectOptions;if (opt.selected) { var nextOpt = selectOptions; opt = selectList.removeChild(opt); nextOpt = selectList.replaceChild(opt, nextOpt); selectList.insertBefore(nextOpt, opt); } }} 4)Moving Options between two Select list boxes
<script language="JavaScript" type="text/javascript"><!--//ref: http://www.mredkj.com/tutorials/tutorial_mixed2b.htmlvar NS4 = (navigator.appName == "Netscape" && parseInt(navigator.appVersion) < 5);function addOption(theSel, theText, theValue){var newOpt = new Option(theText, theValue);var selLength = theSel.length;theSel.options = newOpt;}function deleteOption(theSel, theIndex){ var selLength = theSel.length;if(selLength>0){ theSel.options = null;}}function moveOptions(theSelFrom, theSelTo){ var selLength = theSelFrom.length;var selectedText = new Array();var selectedValues = new Array();var selectedCount = 0; var i; // Find the selected Options in reverse order// and delete them from the 'from' Select.for(i=selLength-1; i>=0; i--){ if(theSelFrom.options.selected) { selectedText = theSelFrom.options.text; selectedValues = theSelFrom.options.value; deleteOption(theSelFrom, i); selectedCount++; }} // Add the selected text/values in reverse order.// This will add the Options to the 'to' Select// in the same order as they were in the 'from' Select.for(i=selectedCount-1; i>=0; i--){ addOption(theSelTo, selectedText, selectedValues);} if(NS4) history.go(0);}//--></script> 5) Select list - Add/Remove Options (DOM)
<script language="JavaScript" type="text/javascript"><!--//ref: http://www.mredkj.com/tutorials/tutorial005.htmlvar 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; 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.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> 6)Listbox options javascript select all,move left-right, move up-dow
//ref: http://viralpatel.net/blogs/listbox-select-all-move-left-right-up-down-javascript/function listbox_selectall(listID, isSelect) { var listbox = document.getElementById(listID); for(var count=0; count < listbox.options.length; count++) { listbox.options.selected = isSelect; }}function listbox_move(listID, direction) { var listbox = document.getElementById(listID); var selIndex = listbox.selectedIndex; if(-1 == selIndex) { alert("Please select an option to move."); return; } var increment = -1; if(direction == 'up') increment = -1; else increment = 1; if((selIndex + increment) < 0 || (selIndex + increment) > (listbox.options.length-1)) { return; } var selValue = listbox.options.value; var selText = listbox.options.text; listbox.options.value = listbox.options.value listbox.options.text = listbox.options.text listbox.options.value = selValue; listbox.options.text = selText; listbox.selectedIndex = selIndex + increment;}function listbox_moveacross(sourceID, destID) { var src = document.getElementById(sourceID); var dest = document.getElementById(destID); for(var count=0; count < src.options.length; count++) { if(src.options.selected == true) { var option = src.options; var newOption = document.createElement("option"); newOption.value = option.value; newOption.text = option.text; newOption.selected = true; try { dest.add(newOption, null); //Standard src.remove(count, null); }catch(error) { dest.add(newOption); // IE only src.remove(count); } count--; } }}
页:
[1]