This example shows how to move items between two ListBox. Basically it allows us to move multiple list items from right to left & Left to right on click event.
<!DOCTYPE html>
<html>
<head>
<title>move accross List box</title>
<style>
.list{
float: left;
}
#list1,#list2{
width: 100px;
height:100px;
}
input[type='button']{
width: 30px;
float: left;
margin-top: 30px;
}
</style>
</head>
<body>
<div class="list">
<select name="list1" id="list1" multiple="multiple">
<option value="opt1">opt1</option>
<option value="opt2">opt2</option>
<option value="opt3">opt3</option>
<option value="opt4">opt4</option>
<option value="opt5">opt5</option>
<option value="opt6">opt6</option>
<option value="opt7">opt7</option>
<option value="opt8">opt8</option>
<option value="opt9">opt9</option>
<option value="opt10">opt10</option>
<option value="opt11">opt11</option>
</select>
</div>
<input type="button" name=">" value=">" onclick="moveacross('list1','list2')">
<input type="button" name="<" value="<" onclick="moveacross('list2','list1')">
<div class="list">
<select name="list2" id="list2" multiple="multiple">
</select>
</div>
<script>
function 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--;
}
}
}
</script>
</body>
</html>
and the output is:
Enjoy...
<!DOCTYPE html>
<html>
<head>
<title>move accross List box</title>
<style>
.list{
float: left;
}
#list1,#list2{
width: 100px;
height:100px;
}
input[type='button']{
width: 30px;
float: left;
margin-top: 30px;
}
</style>
</head>
<body>
<div class="list">
<select name="list1" id="list1" multiple="multiple">
<option value="opt1">opt1</option>
<option value="opt2">opt2</option>
<option value="opt3">opt3</option>
<option value="opt4">opt4</option>
<option value="opt5">opt5</option>
<option value="opt6">opt6</option>
<option value="opt7">opt7</option>
<option value="opt8">opt8</option>
<option value="opt9">opt9</option>
<option value="opt10">opt10</option>
<option value="opt11">opt11</option>
</select>
</div>
<input type="button" name=">" value=">" onclick="moveacross('list1','list2')">
<input type="button" name="<" value="<" onclick="moveacross('list2','list1')">
<div class="list">
<select name="list2" id="list2" multiple="multiple">
</select>
</div>
<script>
function 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--;
}
}
}
</script>
</body>
</html>
and the output is:
Enjoy...
No comments:
Post a Comment