I am using the following js to show a dropdown list when a user makes a selection from the previous one. The only problem with this is that initially the second drop down is not shown in the form which makes it look a little strange.
Can someone tell me how to change this js so that initially it will show a drop down with no options please?
The code I’m using is below. It all works just not quite in the way I need it to now.
<script type="text/javascript">
$(document).ready(function() {
$('#wait_1').hide();
$('#drop_1').change(function(){
$('#wait_1').show();
$('#result_1').hide();
$.get("func.php", {
func: "drop_1",
drop_var: $('#drop_1').val()
}, function(response){
$('#result_1').fadeOut();
setTimeout("finishAjax('result_1', '"+escape(response)+"')", 400);
});
return false;
});
});
function finishAjax(id, response) {
$('#wait_1').hide();
$('#'+id).html(unescape(response));
$('#'+id).fadeIn();
}
</script>
This is the basics of the form I’m using. What happend is user makes a selection form drop_1 which then calls the func.php script and then shows the second drop down. I would just like to show a dummy drop down where the second one will appear until the first selection has been made.
<select name="drop_1" id="drop_1">
<option value="" selected="selected">All Makes</option>
</select>
<select name="models">
<option>All Models</option>
</select>
<span id="wait_1" style="display: none;"><img alt="Please Wait" src="ajax-loader.gif"/></span>
<span id="result_1" style="display: none;"></span>
Any help much appreciated.