Display default data for list box using jquery

I have two list boxes, one for grade and another for subject. Upon change of grade the subjects are populated in the subject list. The values for both the lists are populated using ajax calls. Upon selection of subject the relevant syllabus is populated.

 <select id="gra开发者_如何转开发deSelector">
   <option value=11 > 11</option>
   <option value=12 selected="selected"> 11</option>
 </select>

 <select name=subjects id=subjects>
   <option value=0 selected="selected"> Maths</option>
   <option value=1 >Science</option>
 </select>

My question is, on page load I would like to load default grade,subject and syllabus.

I tried doing this:

  $("#gradeSelector").load('change',function(){ /*the options are populated here*/});

  $("#subjects").load('change',function(){/* the options are populated here*/});

It helps display the syllabus of default subject and grade but I am unable to change the value of list box any further.

Could somebody throw some light please.

You can fill default data in dropdown on page load as follows:

$(document).ready(function() {
    $("#gradeSelector").append($("<option></option>").val('select').html('select'));
});