Javascript Examples

Basics

Syntax - Essential Knowledge

document.write()

Functions 101

Data and Objects 101

Arrays the elegant way

Array - Expanding the concept

Object Literals

Forms

Check all checkboxes

Synchronized Dropdown Boxes

Textarea Word Count

Transfer Listbox to Listbox

Submit Form

Misc

Hide/Unhide DIV Tag

Retrieve Object Properties




Javascript to transfer listbox items between listboxes

Practical javascript demonstrating how to transfer data from one listbox to another.

Javascript in Action




Javascript Code

Javascript and html code are self contained below.

 
  
<html>    
<head>
<script language="javascript"> 
function move(tbFrom, tbTo) 
{
 var arrFrom = new Array(); var arrTo = new Array(); 
 var arrLU = new Array();
 var i;
 for (i = 0; i < tbTo.options.length; i++) 
 {
  arrLU[tbTo.options[i].text] = tbTo.options[i].value;
  arrTo[i] = tbTo.options[i].text;
 }
 var fLength = 0;
 var tLength = arrTo.length;
 for(i = 0; i < tbFrom.options.length; i++) 
 {
  arrLU[tbFrom.options[i].text] = tbFrom.options[i].value;
  if (tbFrom.options[i].selected && tbFrom.options[i].value != "") 
  {
   arrTo[tLength] = tbFrom.options[i].text;
   tLength++;
  }
  else 
  {
   arrFrom[fLength] = tbFrom.options[i].text;
   fLength++;
  }
}

tbFrom.length = 0;
tbTo.length = 0;
var ii;

for(ii = 0; ii < arrFrom.length; ii++) 
{
  var no = new Option();
  no.value = arrLU[arrFrom[ii]];
  no.text = arrFrom[ii];
  tbFrom[ii] = no;
}

for(ii = 0; ii < arrTo.length; ii++) 
{
 var no = new Option();
 no.value = arrLU[arrTo[ii]];
 no.text = arrTo[ii];
 tbTo[ii] = no;
}
}
</script>
</head>

<body>
<hr />  
<form name="combo_box">
<table><tr><td>
<select multiple size="10" name="FromLB" style="width:150">
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
<option value="four">four</option>
<option value="five">five</option>
<option value="six">six</option>
<option value="seven">seven</option>
<option value="eight">eight</option>
<option value="nine">nine</option>
<option value="ten">ten</option>
</select>
</td>
<td align="center" valign="middle">
<input type="button" onClick="move(this.form.FromLB,this.form.ToLB)" 
value="->"><br />
<input type="button" onClick="move(this.form.ToLB,this.form.FromLB)" 
value="<-">
</td>
<td>
<select multiple size="10" name="ToLB" style="width:150">
</select>
</td></tr></table>
</form>
<hr />
</body>
</html> 
 






If you find this site useful and are a book buyer/reader...

Abe Books is one of my affiliates. I only use affiliates that I also purchase products from. I love Abe books. I have purchased many books from them originally cost $40 to $60 for as little as $5 to $10 dollars including shipping costs.

By accessing Abe books and clicking on one of my links I receive a small commission on your purchase that helps pay for this site. You pay no more for your books than if you accessed their site directly. Thanks for your support.

I have found Javascript - The Good Parts to be an indespensible resource

Click on the book to find books on Javascript at Abe Books...

If you would like a new version of the book click below to buy it from Amazon (also one of my affiliates).



Sitemap

Developer Geek Resources





75% of your donation

goes to charity.