2 list-boxes with add & remove button

[Ramamoorthy Ramasamy]

Hi all,

I would like to create a page with VBscript and ASP which will contain
two list-boxes one in the left side and the other in the right side
with two buttons namely "Add>>" and "<<Remove" so that if the user
selects a value listed in the left side list-box and presses "Add>>"
then that selected value should go inside the right side list-box.
Similarly if the user selects a value listed in the right side
list-box and after clicking "<<Remove" then that selected value should
go back to the left side list-box.

Can anyone provide me the code?

Some useful tutorial links explaining the above scenario can also be
given.

Any help is much appreciated and thanks in advance.

regards,
Ramamoorthy

 

[Jeff Cochran]

I would like to create a page with VBscript and ASP which will contain
two list-boxes one in the left side and the other in the right side
with two buttons namely "Add>>" and "<<Remove" so that if the user
selects a value listed in the left side list-box and presses "Add>>"
then that selected value should go inside the right side list-box.
Similarly if the user selects a value listed in the right side
list-box and after clicking "<<Remove" then that selected value should
go back to the left side list-box.

Can anyone provide me the code?

ASP wouldn't be the proper technology for this, you'd want to do this
on the client side. Check a VBScript or Javascript group, and keep in
mind that VBScript has limited support on non-Windows platforms.

Jeff

 

[craig]

This is all the code you need...

<script language="JavaScript">
<!-- hiding
function dosubmit() {}

function deleteOption(object,index) {
object.options[index] = null;
}

function addOption(object,text,value) {
var defaultSelected = true;
var selected = true;
var optionName = new Option(text, value, defaultSelected, selected)
object.options[object.length] = optionName;
}

function copySelected(fromObject,toObject) {
for (var i=0, l=fromObject.options.length;i<l;i++) {
if (fromObject.options.selected)
addOption(toObject,fromObject.options.text,fromObject.options.valu
e);
}
for (var i=fromObject.options.length-1;i>-1;i--) {
if (fromObject.options.selected)
deleteOption(fromObject,i);
}
}

function copyAll(fromObject,toObject) {
for (var i=0, l=fromObject.options.length;i<l;i++) {
addOption(toObject,fromObject.options.text,fromObject.options.valu
e);
}
for (var i=fromObject.options.length-1;i>-1;i--) {
deleteOption(fromObject,i);
}
}


function selectAll(fromObject) {
for (var i=0, l=fromObject.options.length;i<l;i++) {
//addOption(toObject,fromObject.options.text,fromObject.options.va
lue);
fromObject.options.selected = true;
}
}
// stop hiding -->
</script>




<table width = "100%" border = "0">
<tr>
<td>
<select size="15" name="ExtraAreas" class="inpt" multiple
style="width:180">
<%
'call stuff from databse her
%>
<option value="<!-- db value -->"><!-- db value --></option>
</select>
</td>

<td align = "center">
<input type="button" value="Add &raquo; "
onClick="copySelected(this.form.ExtraAreas,this.form.ExtraAreas1),
dosubmit(ExtraAreas1)" class = "button">
<input class = "button" type="button" value="&laquo; Remove"
onClick="copySelected(this.form.ExtraAreas1,this.form.ExtraAreas),
dosubmit(ExtraAreas)">
</td>
<td class = "tableNorm">
<select size="15" name="ExtraAreas1" class="inpt" MULTIPLE
style="width:180"></select>
</td>
</tr>
</table>