U
umls
Here is a self-contained javascript example for copying options from
one box to another. It works fine, except that I need the submit
button to do a hidden input of the selected items instead of
displaying them in an alert box. Any pointers are welcome.
Thanks!
--------
<HTML>
<HEAD>
<TITLE>test of column heading selection</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function moveOver()
{
var boxLength = document.choiceForm.choiceBox.length;
var selectedItem = document.choiceForm.available.selectedIndex;
var selectedText = document.choiceForm.available.options[selectedItem].text;
var selectedValue = document.choiceForm.available.options[selectedItem].value;
var i;
var isNew = true;
if (boxLength != 0) {
for (i = 0; i < boxLength; i++) {
thisitem = document.choiceForm.choiceBox.options.text;
if (thisitem == selectedText) {
isNew = false;
break;
}
}
}
if (isNew) {
newoption = new Option(selectedText, selectedValue, false, false);
document.choiceForm.choiceBox.options[boxLength] = newoption;
}
document.choiceForm.available.selectedIndex=-1;
}
function removeMe() {
var boxLength = document.choiceForm.choiceBox.length;
arrSelected = new Array();
var count = 0;
for (i = 0; i < boxLength; i++) {
if (document.choiceForm.choiceBox.options.selected) {
arrSelected[count] = document.choiceForm.choiceBox.options.value;
}
count++;
}
var x;
for (i = 0; i < boxLength; i++) {
for (x = 0; x < arrSelected.length; x++) {
if (document.choiceForm.choiceBox.options.value == arrSelected[x])
{
document.choiceForm.choiceBox.options = null;
}
}
boxLength = document.choiceForm.choiceBox.length;
}
}
function saveMe() {
var strValues = "";
var boxLength = document.choiceForm.choiceBox.length;
var count = 0;
if (boxLength != 0) {
for (i = 0; i < boxLength; i++) {
if (count == 0) {
strValues = document.choiceForm.choiceBox.options.value;
}
else {
strValues = strValues + "," +
document.choiceForm.choiceBox.options.value;
}
count++;
}
}
if (strValues.length == 0) {
alert("No selections");
}
else {
alert("You selected:\r\n" + strValues);
}
}
// End -->
</script>
</HEAD>
<BODY BGCOLOR=#ffffff vlink=#0000ff>
<BR>
<BR>
<table width="100%" cellpadding=0 cellspacing=0 border=0>
<tr><td width="99%" align=center>
<b>Copy items from the left source box to the right destination
box.</b>
<BR>
<b>The order of selected headings determines the order of column
display.</b>
<BR>
<BR>
</td>
</tr>
</table>
<!-- fillout form -->
<center>
<form name="choiceForm">
<table border=0>
<tr>
<td valign="top" width=175>
<b>Column headings</b>
<br>
<select name="available" size=8 onchange="moveOver();">
<option>Hair color
<option>Weight
<option>Cardiac output
<option>Pulse rate
<option>Maximum Followup
<option>Outcome
<option>Political affiliation
<option>Irritability
</select>
</td>
<td valign="top">
<b>Selected headings <i>(click to remove)</i></b>
<br>
<select multiple name="choiceBox" style="width:150;" size="8"
onclick="removeMe();">
</select>
</td>
</tr>
<tr>
<td colspan=2 height=10>
<br>
<b>
<input type="button" value="Get selected headings"
onclick="saveMe();">
</b>
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
one box to another. It works fine, except that I need the submit
button to do a hidden input of the selected items instead of
displaying them in an alert box. Any pointers are welcome.
Thanks!
--------
<HTML>
<HEAD>
<TITLE>test of column heading selection</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function moveOver()
{
var boxLength = document.choiceForm.choiceBox.length;
var selectedItem = document.choiceForm.available.selectedIndex;
var selectedText = document.choiceForm.available.options[selectedItem].text;
var selectedValue = document.choiceForm.available.options[selectedItem].value;
var i;
var isNew = true;
if (boxLength != 0) {
for (i = 0; i < boxLength; i++) {
thisitem = document.choiceForm.choiceBox.options.text;
if (thisitem == selectedText) {
isNew = false;
break;
}
}
}
if (isNew) {
newoption = new Option(selectedText, selectedValue, false, false);
document.choiceForm.choiceBox.options[boxLength] = newoption;
}
document.choiceForm.available.selectedIndex=-1;
}
function removeMe() {
var boxLength = document.choiceForm.choiceBox.length;
arrSelected = new Array();
var count = 0;
for (i = 0; i < boxLength; i++) {
if (document.choiceForm.choiceBox.options.selected) {
arrSelected[count] = document.choiceForm.choiceBox.options.value;
}
count++;
}
var x;
for (i = 0; i < boxLength; i++) {
for (x = 0; x < arrSelected.length; x++) {
if (document.choiceForm.choiceBox.options.value == arrSelected[x])
{
document.choiceForm.choiceBox.options = null;
}
}
boxLength = document.choiceForm.choiceBox.length;
}
}
function saveMe() {
var strValues = "";
var boxLength = document.choiceForm.choiceBox.length;
var count = 0;
if (boxLength != 0) {
for (i = 0; i < boxLength; i++) {
if (count == 0) {
strValues = document.choiceForm.choiceBox.options.value;
}
else {
strValues = strValues + "," +
document.choiceForm.choiceBox.options.value;
}
count++;
}
}
if (strValues.length == 0) {
alert("No selections");
}
else {
alert("You selected:\r\n" + strValues);
}
}
// End -->
</script>
</HEAD>
<BODY BGCOLOR=#ffffff vlink=#0000ff>
<BR>
<BR>
<table width="100%" cellpadding=0 cellspacing=0 border=0>
<tr><td width="99%" align=center>
<b>Copy items from the left source box to the right destination
box.</b>
<BR>
<b>The order of selected headings determines the order of column
display.</b>
<BR>
<BR>
</td>
</tr>
</table>
<!-- fillout form -->
<center>
<form name="choiceForm">
<table border=0>
<tr>
<td valign="top" width=175>
<b>Column headings</b>
<br>
<select name="available" size=8 onchange="moveOver();">
<option>Hair color
<option>Weight
<option>Cardiac output
<option>Pulse rate
<option>Maximum Followup
<option>Outcome
<option>Political affiliation
<option>Irritability
</select>
</td>
<td valign="top">
<b>Selected headings <i>(click to remove)</i></b>
<br>
<select multiple name="choiceBox" style="width:150;" size="8"
onclick="removeMe();">
</select>
</td>
</tr>
<tr>
<td colspan=2 height=10>
<br>
<b>
<input type="button" value="Get selected headings"
onclick="saveMe();">
</b>
</td>
</tr>
</table>
</form>
</center>
</body>
</html>