Hi,
I have two dropdown lists, and I want to have each option from the first dropdown list to give the specific options on the second dropdown list.
Anyway, let me show you what I really want to do. Please see the code below. If you want to properly run this, please make six dummy images and name them as followed: silo_1_empty.jpg, silo_2_empty.jpg, silo_3_empty.jpg, tm1.jpg, tm2.jpg, tm3.jpg.
What I want to do next is to apply a restriction to the dropdown lists. For instance, if TM#1 is selected, only Silo1 can be selected from the LOCATIONS, and Silo2 and 3 will be removed from the option. If TM#2 is selected, Silo 2 and 3 can be selected and Silo 1 will be removed. TM#3 can be in all locations.
In total, there are 12 modules and 20 locations. Each module image can only appear in one location at a time, but the options to select a location are restricted. Please show me how this can be done. Thank you.
<html>
<title>test 11</title>
<head>
<script language=“javascript”>
function module_update()
{
var new_loc=document.location_module.location.value;
var new_module=document.location_module.module.value;
var new_image=document.getElementById(new_loc);
var all_images=new Array();
all_images=document.getElementsByTagName(“img”);
for(var i=0; i<all_images.length; i++)
{
var image_onpage=(all_images[i].src).substr((all_images[i].src).lastIndexOf(“/”));
var image_dropdown=new_module.substr(new_module.lastIndexOf(“/”));
if (image_onpage==image_dropdown)
{
all_images[i].src=“…/target_hall/”+all_images[i].id+“_empty.jpg”;
}
new_image.src=new_module;
}
}
</script>
</head>
<body>
<!-------------------------dropdown lists-------------------->
<form name=“location_module”>
<table border=“2” cellspacing=“2” cellpadding=“1” align=“center” name=“update”>
<tr>
<td align=“center”> MODULES</td>
<td align=“center”> LOCATIONS</td>
<td align=“center” rowspan=“2”>
<input type=“button” onclick= “module_update();” value=“Update” />
</td>
<tr>
<td align=“center”>
<select name=“module” size=“1”>
<option disabled=“disabled”>–TARGET MODULES–</option>
<option value=“…/target_hall/tm1.jpg”>TM #1</option>
<option value=“…/target_hall/tm2.jpg”>TM #2</option>
<option value=“…/target_hall/tm3.jpg”>TM #3</option>
</select>
</td>
<td align=“center”>
<select name=“location” size=“1”>
<option disabled=“disabled”>-SILOS-</option>
<option value=“silo_1”>Silo 1</option>
<option value=“silo_2”>Silo 2</option>
<option value=“silo_3”>Silo 3</option>
</select>
</td>
<td align=“center” id=“last_updated”></td>
</tr>
<tr>
</table>
<P/>
<!------------------- HotCell and Silo displays-------------------------->
<table border=“0” align=“center” cellspacing=“1” cellpadding=“2” >
<tr>
<td name=“silo_1” align=“center” border=“” >
<img src=“…/target_hall/silo_1_empty.jpg” id=“silo_1” width=“130” height=“130” onclick=“default_silo1()”>
</td>
<td name=“silo_2” align=“center”>
<img src=“…/target_hall/silo_2_empty.jpg” id=“silo_2” width=“130” height=“130” onclick=“default_silo2()”>
</td>
<td name=“silo_3” align=“center”>
<img src=“…/target_hall/silo_3_empty.jpg” id=“silo_3” width=“130” height=“130” onclick=“default_silo3()”>
</td>
</tr>
</table>
</form>
</body>
</html>