tigra
Administrator
Posts: 1926
Registered: 6/17/2002
Location: US, CO
Member Is Offline |
| posted on 5/30/2006 at 12:36 PM |
|
|
Moving selected listbox values to another listbox (transfer options)
This sample demonstrates following functions:
- Transfer of the selected options from one listbox to another
- Transfer of all options from one listbox to another
- Selecting all options of the listbox
| Code: |
<html>
<head>
<title>Moving selected listbox values to another listbox using javascript</title>
</head>
<body>
<script language="JavaScript">
function f_optionMove(s_from, s_to) {
var e_from = document.forms['test_form'].elements[s_from],
e_to = document.forms['test_form'].elements[s_to];
if (!e_from)
return alert ("Error: selectbox with name '" + s_from + "' can't be found.");
if (!e_to)
return alert ("Error: selectbox with name '" + s_from + "' can't be found.");
var n_moved = 0;
for (var i = 0; i < e_from.options.length; i++) {
if (e_from.options.selected) {
e_to.options[e_to.options.length] = new Option(e_from.options.text, e_from.options.value);
n_moved++;
}
else if (n_moved)
e_from.options[i - n_moved] = new Option(e_from.options.text, e_from.options.value);
}
if (n_moved)
e_from.options.length = e_from.options.length - n_moved;
else
alert("You haven't selected any options");
}
function f_optionMoveAll(s_from, s_to) {
var e_from = document.forms['test_form'].elements[s_from],
e_to = document.forms['test_form'].elements[s_to];
if (!e_from)
return alert ("Error: selectbox with name '" + s_from + "' can't be found.");
if (!e_to)
return alert ("Error: selectbox with name '" + s_from + "' can't be found.");
e_to.options.length = 0;
for (var i = 0; i < e_from.options.length; i++)
e_to.options = new Option(e_from.options.text, e_from.options.value);
e_from.options.length = 0;
}
function f_selectAll (s_select) {
var e_select = document.forms['test_form'].elements[s_select];
for (var i = 0; i < e_select.options.length; i++)
e_select.options.selected = true;
}
</script>
<form name="test_form">
<select multiple name="source">
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>E</option>
<option>F</option>
</select>
<select multiple name="destination">
</select>
<br>
<input type="Button" value="Add Selected >>" onclick="f_optionMove('source', 'destination')">
<input type="Button" value="Remove Selected <<" onclick="f_optionMove('destination', 'source')"><br/>
<input type="Button" value="Add All >>" onclick="f_optionMoveAll('source', 'destination')">
<input type="Button" value="Remove All <<" onclick="f_optionMoveAll('destination', 'source')"><br/>
<input type="Button" value="Select All Sources" onclick="f_selectAll('source')">
<input type="Button" value="Select All Destinations;" onclick="f_selectAll('destination')">
</form>
</body>
</html>
|
Attachment: test.html (2.49kb)
This file has been downloaded 1784 times
|
|
|
|
|
