Here's my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<title>Planner</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<script type="text/javascript">
// Variables we need
var previous = new Array();
var lastClicked = '';
// We are going to attach event listeners, no code at the bottom or anything hard coded...
function addEvent(obj, evType, fn)
{
if(obj.addEventListener)
{
obj.addEventListener(evType, fn, false);
return true;
}
else if(obj.attachEvent)
{
var r = obj.attachEvent('on' + evType, fn);
return r;
}
else
{
return false;
}
}
// Let's begin when the DOM is ready
addEvent(window, 'load', begin);
// Attach the handlers to our selects
function begin()
{
addSelect('numbers');
addSelect('sm');
addSelect('sm2');
}
// We add a couple of handlers to each
function addSelect(id)
{
var sel = document.getElementById(id);
addEvent(sel, 'click', whichElement);
addEvent(sel, 'click', addRemoveClicked);
}
// Find which element we are looking at on this click
function whichElement(e)
{
if(!e)
{
var e = window.event;
}
if(e.target)
{
lastClicked = e.target;
}
else if(e.srcElement)
{
lastClicked = e.srcElement;
}
if(lastClicked.nodeType == 3) // Safari bug
{
lastClicked = lastClicked.parentNode;
}
}
// Make sure we are displaying the correct items
function addRemoveClicked(e)
{
if(!previous[this.id])
{
previous[this.id] = new Array();
}
// Remember what has been used
if(previous[this.id][lastClicked.value] == 1)
{
previous[this.id][lastClicked.value] = 0;
}
else
{
previous[this.id][lastClicked.value] = 1;
}
var selectBox = document.getElementById(this.id);
// Add correct highlighting
for(var i = 0; i < selectBox.options.length; i++)
{
selectBox.options[i].selected = '';
if(previous[this.id][selectBox.options[i].value] == 1)
{
selectBox.options[i].selected = 'selected';
}
}
}
</script>
<select name="numbers[]" id="numbers" multiple="multiple" size="6">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<select name="classes[]" id="classes" multiple="multiple" size="10">
<?PHP echo $classCode ?>
</select>
<input type="submit" name="submit" value="Proceed to Next Step" />
</form>
</body></html>
The value of the $classCode variable (string) =
<option value="1">201 Intro to Financial Accounting</option>
<option value="2">202 Intro to Managerial Accounting</option>
<option value="3">130 Intro to Microeconomics</option>
<option value="4">320 Principles Bus Finance</option>
<option value="5">300 Management, & Human Behavior</option>
The first multiple select select box (named numbers[]) works with Javascript as it should. You're able to click multiple items in the box without having to hold CTRL but the second select box, almost identical to the first, doesn't. I assume because I'm having the program write its own code into a PHP variable, then something happens when I try to embed that PHP variable into the HTML code.
Does anyone know why & how to fix it so the second select box will work the same as the first? You can't click multiple items without having to hold CTRL in the second select box so it's like the javascript functions aren't even registering for the second select box.
Update 1: To prove to everyone that it isn't the echo messing things up, I took everything out of an echo statement and it is now only echoing the PHP variable. Still messes up. First select box works, other one that has the PHP variable doesn't.
Excuse the formatting issue. The first 3 chunks of code are meant to be 1.
