select drop down, need another drop down to appear after user selects first

[deansaddigh]

Hi basically i want a user to be able to select from the first drop down and then when they do a second drop down pops up populated with dynamic things that i can figure out.

 

so all i need is another select box to pop up when a user selects something from the first.

 

heres code for first drop down

<label>Course Type :</label>
  <select name="Coursetype">
  	<?php while($row= mysql_fetch_array($result))
				{	
				echo '<option value="'.$row['course_typeid'].'"> '.$row['type'].' </option>';
				}?>
  </select>

[kael.shipman]

You could approach this a few ways, depending on what your needs are. I'm going to use old-style notation just so it's more clear, but you could separate the javascript and HTML in the actual implementation.

 

1. Without Ajax

<script type="text/javascript">

function showSelect2(val) {
var select2 = document.getElementById('select2');
if (val == '') select2.style.display = 'none'; //If the value for select1 is invalid, make sure select2 isn't shown

//Populate select2 according to the value passed

select2.style.display = ''; //Make sure select2 is displayed by removing the CSS rule that hides it
}

</script>

<select id="select1" name="select1" onchange="showSelect2(this.value)">
<option value="">Choose</option>
<option>1</option>
<option>2</option>
</select>

<select id="select2" name="select2" style="display: none;">
<!-- fill when select1 is changed to a valid value -->
</select>

 

2. Ajax fetches a preformed selectbox that you have to place

<script type="text/javascript">

function showSelect2(val) {
var select2_container = document.getElementById('select2_container');
if (val == '') select2_container.innerHTML = ''; //If the value for select1 is invalid, make sure select2 is gone

//Ajax call that sends a preformed <select> box with options to showSelect2(selectBox)
}

function showSelect2(html) {
var select2_container = document.getElementById('select2_container');
select2_container.innerHTML = html; //insert select2 in container
}

</script>

<select id="select1" name="select1" onchange="showSelect2(this.value)">
<option value="">Choose</option>
<option>1</option>
<option>2</option>
</select>

<div id="select2_container">
<!-- select2 will be inserted here when a valid value is selected from select1 -->
</div>

 

3. Leave select1 and select2 both visible, but adjust available select2 options when select1 is changed

<script type="text/javascript">

function showSelect2(val) {
var select2 = document.getElementById('select2');
if (val == '') {
	//remove all select2 options and add <option value="">Select from select1</option>
} else {
	//Populate select2 according to the value passed
}
}

</script>

<select id="select1" name="select1" onchange="showSelect2(this.value)">
<option value="">Choose</option>
<option>1</option>
<option>2</option>
</select>

<select id="select2" name="select2" style="display: none;">
<option value="">Please select from select1</option>
<!-- fill when select1 is changed to a valid value -->
</select>

 

Those examples should give you a good start. Mess with them and you should be alright!