Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


Tip of the Day
Language: Web
Expertise: Intermediate
Jan 10, 2002

Move Selected Items from One Multiple Select to Another


A common task on Web pages is to select a subset of a given set of items. Depending on the page design and concept, you can use checkboxes or multiple select menus.

When using multiple select menus, people often make Javascript arrays to keep the item values and texts for both menus and fill/empty them via these arrays. They don't need to do this.

The arguments [from] and [to] of the function moveItem are source and destination multiple select menu, respectively.
0
Variable [j] represents the length of the destination menu and, at the same time, the index of the next free space for the new item.

Each chosen source selected item can be moved to the destination menu by creating a new destination item based on source item values and destroying the selected item in the source menu.

The key details are menu indexes. If the destination length has changed, the index is increased, and because the source item was deleted, the source index is taken by the next item and should be decreased.

Try the simple demo below. The script is Netscape compatible.
 
<html>
<head>
<script language="JavaScript">
function moveItems(from,to)
{
 j=to.options.length;
 for(i=0;i<from.options.length;i++)
 if(from.options[i].selected==true)
 {
  to.options[j] = new Option(from.options[i].text,_
from.options[i].value);
  from.options[i]=null;
  j++; i--;
 }
}
</script>
</head>
<body>
<form>
<table>
<tr>
<td>
 <select name="s1" size="5" multiple>
  <option value="1">Item1</option>
  <option value="2">Item2</option>
  <option value="3">Item3</option>
  <option value="4">Item4</option>
 </select>
</td>
<td>
 <input type="button" value=" > "
onClick="moveItems(this.form.s1,this.form.s2)"> <br>
 <input type="button" value=" < "
onClick="moveItems(this.form.s2,this.form.s1)">
</td>
<td>
 <select name="s2" size="5" multiple>
 </select>
</td>
</tr>
</table>
</form>
</body>
</html>
Vlado Velkov
 
Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap
Thanks for your registration, follow us on our social networks to keep up-to-date