Function does not work on body load?

I have a js function which is set up to pull values into a <select> when another <select> is changed.
Can anyone tell me how I can also get this to work when the page is initially loaded aswell please?

This is the js code:


$(document).ready(function() {
	$('#drop_1').change(function(){
      $.get("func.php", {
		func: "drop_1",
		drop_var: $('#drop_1').val()
      }, function(response){
        setTimeout("finishAjax('result_1', '"+escape(response)+"')", 400);
      });
    	return false;
	});
});

function finishAjax(id, response) {
  $('#MyHolder').html(unescape(response));
}

This is the code in the func.php file:


function getTierOne()
{
	$result = mysql_query("SELECT DISTINCT Make FROM table")
	or die(mysql_error());

	  while($tier = mysql_fetch_array( $result ))

		{
			if($tier['Make'] == $_REQUEST['make']) { $mine = 'selected="selected"';}	
	  		if($tier['Make'] != $_REQUEST['make']) { $mine = '';}		
		   echo '<option value="'.$tier['Make'].'" '.$mine.'>'.$tier['Make'].'</option>';
		}

}

//**************************************
//     First selection results     //
//**************************************
if($_GET['func'] == "drop_1" && isset($_GET['func'])) {
   drop_1($_GET['drop_var']);
}

function drop_1($drop_var)
{
    include_once('db.php');
	
	$result = mysql_query("SELECT DISTINCT Model FROM Used_Stock WHERE Type='4' AND Make='$drop_var' ORDER BY Model ASC")
	or die(mysql_error());
	
	echo '<select name="model" id="model" class="selection" onchange="showTotalArticles()">
	      <option value="" selected="selected">All Models</option>';

		   while($drop_2 = mysql_fetch_array( $result ))
			{
			  echo '<option value="'.$drop_2['Model'].'">'.$drop_2['Model'].'</option>';
			}
	
	echo '</select> ';
    //echo '<input type="submit" name="submit" value="Submit" />';
}

Something like this should work

$(document).ready(function() {
	$('#drop_1').change(loadSelectItems);
        loadSelectItems();
});

function finishAjax(id, response) {
  $('#MyHolder').html(unescape(response));
}

function loadSelectItems() {
      $.get("func.php", {
		func: "drop_1",
		drop_var: $('#drop_1').val()
      }, function(response){
        setTimeout("finishAjax('result_1', '"+escape(response)+"')", 400);
      });
    	return false;
}

If you want to immediately populate the 2nd dropdown on page load with initial values, it’s quite simple, we just need to trigger this “change” event handler that you’ve just added.


$(document).ready(function() { 
    $('#drop_1').change(function(){
        $.get(
            "func.php",
            {
                func: "drop_1",
                drop_var: $('#drop_1').val()
            },
            function(response){
                setTimeout("finishAjax('result_1', '"+escape(response)+"')", 400);
            }
        );
        return false;
    })[COLOR=#ff0000].trigger("change")[/COLOR]; //trigger the change event that you just created
});