How to make multiple selections and then to pass them to another 'select'?

cesark

06-30-2004, 03:43 PM

Hi!

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">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<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");
return;
}
}

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);
document.getElementById('selectedCert').removeChild(oChild);

}

</script>

<body>
<table>
<form name="test">
<tr>
<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>

</select>
</td>

<td width="76" align="center" valign="top"><p><a href="#" onClick="addArticle();">Add</a> <span>>></span></p>
<p><span><<</span> <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;">
</select></td>
</tr>
</form>
</table>
</body>
</html>

Thank you,
Cesar

sad69

06-30-2004, 07: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:
http://www.gruenebydesign.com/rotc/...edraft2004.html

(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,
Sadiq.

cesark

06-30-2004, 10: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,
Cesar

sad69

06-30-2004, 10:25 PM

Oops!! Here it is:
http://www.gruenebydesign.com/rotc/2004/predraft2004.html

Sadiq.

cesark

07-01-2004, 10: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.

glenngv

07-01-2004, 10:46 AM

http://www.codingforums.com/showthread.php?t=39943#post208200

cesark

07-01-2004, 11:28 AM

Ok, thanks Glenn. :)