Move options in a combo to another Combo

This is one of selection methods used in web developing. Here we can use javascript to get this job done… šŸ™‚

combo

This is the HTML form I used….

<html>
<head>
<title>Move items from one combo to another</title>

<script type="text/javascript" src="moveItems.js"></script>

<body>
<table align="centre" class="box-table-a" width="80%" id="tblFields">
<tr>
<td>

<select size=5 name=select_columns multiple=yes id=available_columns>
<option value ="Name">Name</option>
<option value ="Age">Age</option>
<option value ="Gender">Gender</option>
<option value ="Address">Address</option>
</select>

</td>
<td>

<br>
<input type="button" id="move_right" onclick="moveRightAll()" value="Move All >>">
<br>
<input type="button" id="move_right" onclick="moveRight()" value=">>">
<br>
<input type="button" id="move_left" onclick="moveLeft()" value="<<">
<br>
<input type="button" id="move_left" onclick="moveLeftAll()" value="<< Move All">
<br>

</td>
<td>
<select name="selectedItems" id="selected_columns" size="5" multiple="yes">
</select>
</td>
</tr>

</table>
</body>
</html>

Following is the javascript file I used …
moveItems.js

// JavaScript Document

//moving all items
function moveRightAll(){

var av_cols = document.getElementById('available_columns');
var sl_cols = document.getElementById('selected_columns');
var sl_length = sl_cols.options.length;
//empty selected item box
//sl_cols.options.length = 0;

for (var i = 0; i < av_cols.options.length; i ){
sl_cols.options[i sl_length] = new Option(av_cols.options[i].text, av_cols.options[i].value);
}

for (var i = 0; i < av_cols.options.length; i )
{
sl_cols.options[i sl_length] = new Option(av_cols.options[i].text, av_cols.options[i].value,av_cols.options[i].selected = true);
// av_cols.options[i].value.select();
}

//empty available item box
av_cols.options.length = 0;

}

//moving all items
function moveLeftAll(){

var av_cols = document.getElementById('available_columns');
var sl_cols = document.getElementById('selected_columns');
var av_length = av_cols.options.length;
//empty available item box
//av_cols.options.length = 0;

for (var i = 0; i < sl_cols.options.length; i )
av_cols.options[i av_length] = new Option(sl_cols.options[i].text, sl_cols.options[i].value);

//empty selected item box
sl_cols.options.length = 0;

}

//moving items to the right
function moveRight(){
var av_cols = document.getElementById('available_columns');
var sl_cols = document.getElementById('selected_columns');

swapItems(av_cols, sl_cols);

}

function moveLeft(){
var av_cols = document.getElementById('available_columns');
var sl_cols = document.getElementById('selected_columns');

swapItems(sl_cols, av_cols);

}

function swapItems(boxFrom, boxTo){
var countBoxTo = boxTo.options.length;

for (var i = 0; i < boxFrom.options.length; i ){
if (boxFrom.options[i].selected) {
boxTo.options[countBoxTo ] = new Option(boxFrom.options[i].text, boxFrom.options[i].value);
removeItem(boxFrom, i);
i–;
}
}
}

function removeItem(listBox, optionIndex){
listBox.remove(optionIndex);

}

Advertisements
Published in: on November 13, 2009 at 10:15 am  Leave a Comment  

The URI to TrackBack this entry is: https://nimesha1984.wordpress.com/2009/11/13/move-options-in-a-combo-to-another-combo/trackback/

RSS feed for comments on this post.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: