jquery ajax request to populate second select box not working?

this is my php function will be called server side script

public function getColleges($ getCollege) {

    $  query_get_college = "select cg.* from college as cg,campus as cmp where cmp.id='" . $  getCollege['campus_id'] . "' and cg.c_campus=cmp.badge";
    $  exe_get_college = execute_query($  query_get_college, true, "select");
    $  html = '';
    $  html .="<select name='colleges' id='College1'>";
    $  html .="<option value='0'>select </option>";
    foreach ($  exe_get_college as $  kk => $  colleges) {
        if (!empty($  colleges) && is_array($  colleges))
            $  html .="<option value='" . $  colleges['c_id'] . "'>" . $  colleges['c_college_name'] . "</option>";
    }
    $  html .='</select>';
    echo $  html;
}

public function getDepartments($  getDepartments) {

    $  query_get_departments = "select dpt.* from dept as dpt,college as cg where cg.c_id='" . $  getDepartments['college_id'] . "' and cg.c_id=dpt.d_college_id";
    $  exe_get_departments = execute_query($  query_get_departments, true, "select");
    $  html = '';
    $  html .="<select name='Department' id='Department'>";
    $  html .="<option value='0'>select</option>";
    foreach ($  exe_get_departments as $  kk => $  departments) {
        if (!empty($  departments) && is_array($  departments))
            $  html .="<option value='" . $  departments['d_id'] . "'>" . $  departments['d_dept_name'] . "</option>";
    }
    $  html .='</select>';
    echo $  html;
}

this is client side request

$  (document).ready(function(){
 $  ("#Campus").change(function() {
        var id = $  (this).val();
        var div ='College_div';
        var str = '';
        str +='action='+'campus'+'&';
        str += 'campus_id='+id;
        remoteCall1(getUrl+'registration/registration.php',str,div);
    });

    $  ("#College1").change(function() {
        alert("rajesh");
        var c_id = $  (this).val();
        var div ='Department_div';
        var str = '';
        str +='action='+'college'+'&';
        str += 'college_id='+c_id;
        remCall1(getUrl+'registration/registration.php',str,div);
    });
});

this is my remCall1 function

function remCall1(sUrl, sQueryStr,div)
{

    $  .ajax({
        type: "POST",
        url: sUrl,
        data: sQueryStr,
        dataType: "html",
        success: function(data) {
            switch(div){
                case 'College_div':
                    $  ('#College_div').html(data);
                    break;
                case 'Department_div':
                    $  ('#Department_div').html(data);
                    break;
            }
        }
    });
}

my problem is I am getting first select box which is college list using $ ("#Campus").change(function() {
but not the $ ("#College1").change(function() {
I tried a lot but cant get the reason
please suggest..
thanks

newest questions tagged jquery – Stack Overflow