function documentReady() {	

    $("select[name='AreaOfInterest']").change(function() {
         $.getJSON("/aoi2OptionsJson.do?",{AreaOfInterest: $("select[name='AreaOfInterest'] :selected").text(), ajax: 'true'}, function(aoi2s){
         var options = '<option value="">--Select a Specific Program--</option>';
             for (var i = 0; i < aoi2s.length; i++) {
                  options += '<option value="' + aoi2s[i] + '">' + aoi2s[i] + '</option>';
          }
         $("select[name='ProgramsOfInterestType']").html(options);
         $("#ProgramsOfInterestType").removeClass("hide");
         
         sortDropDownListByText();
         $("select[name='ProgramsOfInterestType']").append('<option value="---Any aoi Program---">'+'Any '+$("select[name='AreaOfInterest'] :selected").text()+' Program </option>');
      })
     });
    
}

function sortDropDownListByText() {
		    // Loop for each select element on the page.
    $("select").each(function() {
    	
    	if("DegreeOfInterest" != $(this).attr('name')){    
        // Keep track of the selected option.
        var selectedValue = $(this).val();
 
        // Sort all the options by text. I could easily sort these by val.
        $(this).html($("option", $(this)).sort(function(a, b) {
            return a.text == b.text ? 0 : a.text < b.text ? -1 : 1
        }));
 
        // Select one option.
        $(this).val(selectedValue);
    	}
    });
}