...

View Full Version : Help with selecting one item from multiple list boxes



adamram
10-22-2005, 10:43 PM
I know this is probably insanely easy but I've spent hours searching these forums and others for a solution for this problem. I have a form with 3 list boxes and I want a user to be able to select only one item from only one list box. When the user selects an item the other list boxes are deselected so when the user will eventually submit the form it is only passing the variable from the last box selected.
Please see example. Thanks for any help, advice you can provide.


<form name="form1" method="post" action="">
<table width="32%" border="0">
<tr>
<th height="26" scope="row"><div align="center">Fruit</div></th>
<th scope="row"><div align="center">Vegetables</div></th>
<th scope="row"><div align="center">Meat</div></th>
</tr>
<tr>
<th scope="row"><div align="center">
<select name="select1" size="3" id="select1">
<option>Apples</option>
<option>Pears</option>
<option>Oranges</option>
</select>
</div></th>
<th scope="row"><div align="center">
<select name="select2" size="3" id="select2">
<option>Carrots</option>
<option>Sprouts</option>
<option>Lettuce</option>
</select>
</div></th>
<th scope="row"><div align="center">
<select name="select3" size="3" id="select3">
<option>Beef</option>
<option>Chicken</option>
<option>Fish</option>
</select>
</div></th>
</tr>
</table>
<p>
</form>

vwphillips
10-22-2005, 11:37 PM
<form name="form1" method="post" action="">
<table width="32%" border="0">
<tr>
<th height="26" scope="row"><div align="center">Fruit</div></th>
<th scope="row"><div align="center">Vegetables</div></th>
<th scope="row"><div align="center">Meat</div></th>
</tr>
<tr>
<th scope="row"><div align="center">
<select name="select1" size="3" id="select1" onchange="OneSelect(this,'select1','select2','select3');" >
<option>Apples</option>
<option>Pears</option>
<option>Oranges</option>
</select>
</div></th>
<th scope="row"><div align="center">
<select name="select2" size="3" id="select2" onchange="OneSelect(this,'select1','select2','select3');" >
<option>Carrots</option>
<option>Sprouts</option>
<option>Lettuce</option>
</select>
</div></th>
<th scope="row"><div align="center">
<select name="select3" size="3" id="select3" onchange="OneSelect(this,'select1','select2','select3');" >
<option>Beef</option>
<option>Chicken</option>
<option>Fish</option>
</select>
</div></th>
</tr>
</table>
<p>
</form>
<script language="JavaScript" type="text/javascript">
<!--

function OneSelect(obj,id1,id2,id2){
sel=OneSelect.arguments;
for (i=1;i<sel.length;i++){
if (document.getElementById(sel[i])!=obj){
document.getElementById(sel[i]).setAttribute('disabled','disabled');
}
}
}
//-->
</script>

adamram
10-23-2005, 02:10 AM
Thanks



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum