function does not work on body load?

[sketchgal]

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" />';
} 

[ronalds]

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;
}

[AussieJohn]

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;
    }).trigger("change"); //trigger the change event that you just created
});