Need Help with Dynamic multiple selects [Archive]

Jdavis

11-10-2003, 04:22 PM

Hello all,

I am having a small problem with dynamically setting multiple select boxes. Allow me to set up the scenerio.

I have created 2 dynamic multiple select boxes on a page using javascript. The options for these select boxes are being created by reading 2 arrays. 1 array has the value for a magazine name. The other has the associated files that go to the magazine.

I am running into a problem because I want to be able to click on a magazine name in the select box and have all of the associated files for that mag highlighted in the other dropdown. I am able to get that much working for single selections. But when I shift click to select multiples it does not work. The same goes for control click. The associated options must also be deselected when an option in ctrl-clicked.

This is only being developed for IE so there is no need for cross compatible code.

Below is the code as I have it so far

+++++++++++++++++++++++++++++++++++++++++
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<script>

var MagNames = new Array()
MagNames[0] = "Bloomberg";
MagNames[1] = "Money Market";
MagNames[2] = "Forbes";

var MagInfo = new Array()
MagInfo[0] = ["Forbes","test8","32","camp8","51","10-21","12-21"]
MagInfo[1] = ["Bloomberg","test1","25","camp1","44","10-11","12-11"]
MagInfo[2] = ["Bloomberg","test2","26","camp2","45","10-21","12-21"]
MagInfo[3] = ["Money Market","test5","29","camp5","48","10-21","12-21"]
MagInfo[4] = ["Bloomberg","test3","27","camp3","46","10-31","12-31"]
MagInfo[5] = ["Money Market","test4","28","camp4","47","10-11","12-11"]
MagInfo[6] = ["Money Market","test6","30","camp6","49","10-31","12-31"]
MagInfo[7] = ["Forbes","test7","31","camp7","50","10-11","12-11"]
MagInfo[8] = ["Forbes","test9","33","camp9","52","10-31","12-31"]
MagInfo[9] = ["Forbes","test7","31","camp7","50","10-11","12-11"]
MagInfo[10] = ["Forbes","test9","33","camp9","52","10-31","12-31"]
MagInfo[11] = ["Money Market","test4","28","camp4","47","10-11","12-11"]
MagInfo[12] = ["Money Market","test6","30","camp6","49","10-31","12-31"]

function setCampaign(whichElement)
{
var options_string = "";
var the_select = eval("window.document.form1." + whichElement);
for (loop=0; loop < the_select.options.length; loop++)
{
if (the_select.options[loop].selected)
{
var text = the_select.options[loop].text;
}

}

//DO SOMETHING WITH CHOOSEN ELEMENT
for (i = 0; i < MagInfo.length; i ++)
{
if (text == MagInfo[i][0])
{
document.form1.campaigns.options[i].selected = true; //new Option(MagInfo[i][3], "folk")
}
else
{
document.form1.campaigns.options[i].selected = false;
}

}

}

</script>
</head>

<body>
<form name="form1">
<select multiple name="campaigns" size="15" onchange="setMag('campaigns')">

<script>
for (i=0; i < MagInfo.length; i ++)
{
document.write('<option name=' + MagInfo[i] + '>' + MagInfo[i][3]);
}
</script>

</select>

<select multiple name="mags" size="15" onchange="setCampaign('mags')">

<script>
for (i=0; i < MagNames.length; i ++)
{
document.write("<option name=" + MagNames[i] + ">" + MagNames[i]);
}
</script>

</select>

</form>

</body>
</html>

Any help is greatly appreciated

John