Slight tweak to js to show initial value until selection is made

JavaScript
1

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.