HTML Element

lee79

1. select
 
1) 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[FormName].elements[SelectName].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[i].value == value) {   select.removeChild(kids[i]);   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[i];  if (opt.selected) {   selectList.removeChild(opt);   selectList.insertBefore(opt, selectOptions[i - 1]);     }    }}// 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[i];  if (opt.selected) {   var nextOpt = selectOptions[i + 1];   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[selLength] = newOpt;}function deleteOption(theSel, theIndex){   var selLength = theSel.length;  if(selLength>0)  {    theSel.options[theIndex] = 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[i].selected)    {      selectedText[selectedCount] = theSelFrom.options[i].text;      selectedValues[selectedCount] = theSelFrom.options[i].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[i], selectedValues[i]);  }    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[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> 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[count].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[selIndex].value;    var selText = listbox.options[selIndex].text;    listbox.options[selIndex].value = listbox.options[selIndex + increment].value    listbox.options[selIndex].text = listbox.options[selIndex + increment].text     listbox.options[selIndex + increment].value = selValue;    listbox.options[selIndex + increment].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[count].selected == true) {                var option = src.options[count];                 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--;        }    }}