Compare values of several drop boxes, notify user

SoC · April 19th, 2005, 01:09 AM

Hi,

I need to create a web page that shows 5 or more drop boxes. Their values will be populated from the same database.

I would like to alert the user when they select the same option in 2 or more drop boxes.

For example, if the user selects 'Pig' from box 1, 'Dog' from box 2, 'Pig' from box 3, the selected option in boxes 1 and 3 will change to red text, and an alert will pop up notifying them of the clash.

I can achieve this functionality across 2 drop boxes simply by comparing their values on the onChange event, but I'm not sure how to do it when their are more than 2 drop boxes.

Do I have to use an array or something? Any help much appreciated.

S

interrupt · April 21st, 2005, 10:17 AM

Hi,

This sort of works.

<html>

<head>
<title>Array Experiment</title>
</head>

<body>

<form name="form1">
<select name="sel1" id="1st" onchange="checkforduplicates()">
<option value="pig">Pig
<option value="dog">Dog
<option value="monkey">Monkey</option>
</select> <select name="sel2" id="2nd" onchange="checkforduplicates()">
<option value="dog">Dog
<option value="monkey">Monkey
<option value="pig">Pig</option>
</select> <select name="sel3" id="3rd" onchange="checkforduplicates()">
<option value="giraffe">Giraffe
<option value="Pig">Pig
<option value="zebra">Zebra</option>
</select> <select name="sel4" id="4th" onchange="checkforduplicates()">
<option value="wildebeest">Wildebeest
<option value="pigeon">Pigeon
<option value="Pig">Pig</option>
</select> <select name="sel5" id="5th" onchange="checkforduplicates()">
<option value="blackbird">Blackbird
<option value="pig">Pig
<option value="lemur">Lemur</option>
</select>
</form>

<script language ="javascript">
var timer1 = setTimeout("checkforduplicates()", 20)

function checkforduplicates(){

var checksel = {
checksel1 : document.form1.sel1,
checksel2 : document.form1.sel2,
checksel3 : document.form1.sel3,
checksel4 : document.form1.sel4,
checksel5 : document.form1.sel5
}

var holdingpen = new Array(checksel.checksel1.options(checksel.checksel 1.selectedIndex).value, checksel.checksel2.options(checksel.checksel2.sele ctedIndex).value, checksel.checksel3.options(checksel.checksel3.sele ctedIndex).value, checksel.checksel4.options(checksel.checksel4.sele ctedIndex).value, checksel.checksel5.options(checksel.checksel5.sele ctedIndex).value)

holdingpen.sort()

for (var i=0; i<holdingpen.length - 1; i++)
{
  if (holdingpen[i] == holdingpen[i+1])
    //holdingpen[i+1] = '';
    alert(holdingpen[i+1] = holdingpen[i] + ' was duplicated!');
    document.form1.reset();
}

}
</script>

</body>

</html>

Hope that helps
interrupt