...

View Full Version : Multiple select boxes in one form using one function



nemasys
05-01-2007, 05:20 PM
Hi all,

I am trying to have one JavaScript function, whereby I can have multiple select boxes in one form and am struggling to achieve my goal. It would be nice if the JavaScript function is generic so I could add more select boxes if needed.

Any help would be much appreciated

Thanks in advance
J



<script language="JavaScript" type="text/javascript">
<!--

var NS4 = (navigator.appName == "Netscape" && parseInt(navigator.appVersion) < 5);

function addOption(theSel, theText, theValue)
{
var newOpt = new Option(theText, theValue);
var selLength = theSel.length;
theSel.options[selLength] = newOpt;
}

function deleteOption(theSel, theIndex)
{
var selLength = theSel.length;
if(selLength>0)
{
theSel.options[theIndex] = null;
}
}

function moveOptions(theSelFrom, theSelTo)
{

var selLength = theSelFrom.length;
var selectedText = new Array();
var selectedValues = new Array();
var selectedCount = 0;

var i;

// Find the selected Options in reverse order
// and delete them from the 'from' Select.
for(i=selLength-1; i>=0; i--)
{
if(theSelFrom.options[i].selected)
{
selectedText[selectedCount] = theSelFrom.options[i].text;
selectedValues[selectedCount] = theSelFrom.options[i].value;
deleteOption(theSelFrom, i);
selectedCount++;
}
}

// Add the selected text/values in reverse order.
// This will add the Options to the 'to' Select
// in the same order as they were in the 'from' Select.
for(i=selectedCount-1; i>=0; i--)
{
addOption(theSelTo, selectedText[i], selectedValues[i]);
}

if(NS4) history.go(0);
}

//-->
</script>

<form action="yourpage.asp" method="post">
<table border="0">
<tr>
<td>
<select name="sel1" size="10" multiple="multiple">
<option value="1">Left1</option>
<option value="2">Left2</option>
<option value="3">Left3</option>
<option value="4">Left4</option>
<option value="5">Left5</option>
</select>
</td>
<td align="center" valign="middle">
<input type="button" value="--&gt;"
onclick="moveOptions(this.form.sel1, this.form.sel2);" /><br />
<input type="button" value="&lt;--"
onclick="moveOptions(this.form.sel2, this.form.sel1);" />
</td>
<td>
<select name="sel2" size="10" multiple="multiple">
<option value="1">Right1</option>
<option value="2">Right2</option>
<option value="3">Right3</option>
<option value="4">Right4</option>
<option value="5">Right5</option>
</select>
</td>
</tr>
<tr>
<td>
<select name="sel1" size="10" multiple="multiple">
<option value="1">Left1</option>
<option value="2">Left2</option>
<option value="3">Left3</option>
<option value="4">Left4</option>
<option value="5">Left5</option>
</select>
</td>
<td align="center" valign="middle">
<input type="button" value="--&gt;"
onclick="moveOptions(this.form.sel1, this.form.sel2);" /><br />
<input type="button" value="&lt;--"
onclick="moveOptions(this.form.sel2, this.form.sel1);" />
</td>
<td>
<select name="sel2" size="10" multiple="multiple">
<option value="1">Right1</option>
<option value="2">Right2</option>
<option value="3">Right3</option>
<option value="4">Right4</option>
<option value="5">Right5</option>
</select>
</td>
</tr>
</table>
</form>

glenngv
05-01-2007, 05:41 PM
Your functions are already generic. You can have as many select boxes as you want because you're passing the select objects in the function.

nemasys
05-01-2007, 05:45 PM
Hi Glen,

The issue I have is the select boxes, when actually try to move the objects across from one box to the other they fail and I am not sure why.

Could you help.

Thanks
J



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum