How to make a 2 parts dropdown

[Magnuskamstrup]

Hey :)

I am trying to make a foot calculator. And i will make a 2 parts dropdown. for example:
1)
(in the first dropdown) Where have you eaten?

<select size="6" id="availableOptions" name="availableOptions">
			<option value= 1>McD </option>
			<option value= 2>Burger King</option>
			<option value= 3>Sunset</option>
			</select> </td>

2)
(If you have eaten on McD, you will see the foot you can get on Mcd. And if you have eaten on Burgerking, you will see witch foot they have.)

How can i get this to work ?

[niranga]

Use onchange event (http://www.w3schools.com/jsref/event_onchange.asp)
Handle onchange events of "Where have you eaten?" drop down and re-populate the items of the "Food they have" drop down.

[niranga]

Hope this example I wrote will be helpful

Javascript

<script type="text/javascript">
	function itemSelect(e)
	{
		var foodsSelect = document.getElementById("foods");				
		switch (e.options[e.selectedIndex].value)
		{
			case "1":
				foodsSelect.options.length = 0;
				foodsSelect.options[0] = new Option("McD Food 1", e.options[e.selectedIndex].value+"_1", true, false)
				foodsSelect.options[1] = new Option("McD Food 2", e.options[e.selectedIndex].value+"_2", true, false)
				foodsSelect.options[2] = new Option("McD Food 3", e.options[e.selectedIndex].value+"_3", true, false)
				break;
			
			case "2":
				//Same as case 1 with different options
				break;
			
			case "3":
				//Same as case 1 with different options
				break;
		}				
	}
</script>

Select elements

<select onchange="itemSelect(this);">
	<option value="1" selected>McD</option>
	<option value="2">Burger King</option>
	<option value="3">Sunset</option>
</select>
<select id="foods">
	<option value="1_1" selected>McD Food 1</option>
	<option value="1_2">McD Food 2</option>
	<option value="1_3">McD Food 3</option>
</select>