GEO Source Code The Programmers Community

Sometimes you need to use a multi-select list in HTML with the options "Select ALL" to select all the list items and "Clear" to de-select all list items. You can implement this functionality with the help of javascript.

Assue we have a following HTML List:

Code: Select all

<form name="frmList" id="frmList" method="" action="">
<select name="List" value="List" size="5" multiple>
  <option value="1">Menu Item 1</option>
  <option value="2">Menu Item 2</option>
  <option value="3">Menu Item 3</option>
  <option value="4">Menu Item 4</option>
  <option value="5">Menu Item 5</option>
  <option value="6">Menu Item 6</option>
  <option value="7">Menu Item 7</option>
  <option value="8">Menu Item 8</option>
  <option value="9">Menu Item 9</option> 
</select>
</form>
<a href="#" onclick="selectAll( ); return false;">Select All</a> - <a href="#" onclick="clearAll( ); return false;">Clear</a><br />


And following is the javascript code:

Code: Select all

function selectAll( )
{
   var iLength = document.frmList.List.length;
   
   for (var i = 0; i < iLength; i++ )
      document.frmList.List.options[i].selected = true;
}

function clearAll( )
{
   var iLength = document.frmList.List.length;
   
   for (var i = 0; i < iLength; i++ )
      document.frmList.List.options[i].selected = false;
      
   document.frmList.List.selectedIndex = -1;
}