I was helped out with this code (So thanks if it was you who helped me :P)
Currently, when you select an item in the dropdown box, it removes it from the others. But now, I also want it to add the item that was deleted form the others when you change the value...
Eg. You select 'One' in box 1 (now 'One' is removed from boxes 2 and 3.)
You now select 'Two' in box 1... I would like the previously selected 'One' to be re-added to the other boxes as now it's not in use.
Thanks (Not using jquery or prototype etc)
Javascript:
<script type="text/javascript">
function check(element)
{
drops = document.getElementsByName('drop').length;
opts = 4;
for (i=1;i<drops+1;i++)
{
if (element.id != 'drop'+i && element.value != '0')
{
for (z=0;z<opts;z++)
{
if (document.getElementById('drop'+i).options[z].value == element.value)
{
document.getElementById('drop'+i).options[z] = null;
break;
}
}
}
}
}
</script>
HTML:
<select id="drop1" name="drop" onchange="check(this);">
<option value="0"></option>
<option value="3">One</option>
<option value="5">Two</option>
<option value="1">Three</option>
</select>
<select id="drop2" name="drop" onchange="check(this);">
<option value="0"></option>
<option value="3">One</option>
<option value="5">Two</option>
<option value="1">Three</option>
</select>
<select id="drop3" name="drop" onchange="check(this);">
<option value="0"></option>
<option value="3">One</option>
<option value="5">Two</option>
<option value="1">Three</option>
</select>