View Full Version : How to make multiple selections and then to pass them to another 'select'?

06-30-2004, 04:43 PM

I have two ‘select’ boxes in order to chose one or more kinds of product quality. In the first ‘select’ I have several options to chose, and the second ‘select’ is empty. To make the selections, first I select one option from the first ‘select’ box, and then I click the link ‘add’ so that the text selected is showed in the second ‘select’ (with its value behind). And thus for every option I want to select.

But now, I want that If the user has selected several items from the first select object (with the control key pressed), I want that when the user presses the ‘add’ link, all the selections are passed to the second select object. And I want the same functionality when the user presses the link ‘delete’ to delete several items from the second select.
How can I do this?

The code page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">
function addArticle() {

for(var i=0; i<document.getElementById('selectedCert').length; i++) {

if(document.getElementById('selectedCert').options[i].value == document.getElementById('QualityCert').options[document.getElementById('QualityCert').selectedIndex].value) {
alert("Already exists");

document.getElementById('selectedCert').options[document.getElementById('selectedCert').options.length]=new Option (document.getElementById('QualityCert').options[document.getElementById('QualityCert').selectedIndex].text, document.getElementById('QualityCert').options[document.getElementById('QualityCert').selectedIndex].value);


function removeArticle() {

var oChild = document.getElementById('selectedCert').children(document.getElementById('selectedCert').selectedInd ex);



<form name="test">
<td width="76">
<select name="QualityCert" size="4" multiple="multiple" style="height:140px;">
<option value="10">Quality 1</option>
<option value="20">Quality 2</option>
<option value="30">Quality 3</option>
<option value="40">Quality 4</option>
<option value="50">Quality 5</option>
<option value="60">Quality 6</option>
<option value="70">Quality 7</option>
<option value="80">Others</option>


<td width="76" align="center" valign="top"><p><a href="#" onClick="addArticle();">Add</a>&nbsp;<span>&gt;&gt;</span></p>
<p><span>&lt;&lt;</span>&nbsp;<a href="#" onClick="removeArticle();">Delete</a></p></td>
<td width="134" rowspan="2" align="left" valign="top"><select name="selectedCert" size="4" multiple="multiple" style="height:140px;width:75px;">

Thank you,

06-30-2004, 08:51 PM
In a recent thread, mqcarpenter posted a question regarding his script. Anyway, his question isn't really relevant here, but the script he had does just what you want.

You can take a look at it here:

(I'm hoping he doesn't mind me posting this, as he's posted it in his threads a few times..).

I'm not familiar with how it works, however, you can take a look at the source code and see if you can figure it out for yourself.

Hope that helps,

06-30-2004, 11:17 PM
Sorry but I can 't see the page your link refers ( http://www.gruenebydesign.com/rotc/...edraft2004.html ), maybe is not correct. Would you mind repeating the complete address?

Thank you,

06-30-2004, 11:25 PM
Oops!! Here it is:


07-01-2004, 11:30 AM
I have seen the page but the javascript function that makes the operations isn' t there. If you select 'view/source code' from the browser you can see the code page, but the javascript function isn' t there because it is using an external 'js' file (<SCRIPT LANGUAGE="JavaScript" SRC="/rotc/js/selectbox.js"></SCRIPT>). So, I need the 'selectbox.js' file to see the javascript function.

07-01-2004, 11:46 AM

07-01-2004, 12:28 PM
Ok, thanks Glenn. :)