what is wrong in this code?
when i change drop down list,the grid takes old value of ddl only, not taken newely selected values why?
<%--
 
 $(function() {
 $("#StateId").change(function() {
         $('#TheForm').submit();
     });
 });
 $(function() {
     $("#CityId").change(function() {
         $('#TheForm').submit();
     });
 });
 $(function() {
 $("#HospitalName").change(function() {
         $('#TheForm').submit();
     });
 });
--%
     
    
    
    
    
  
      var gridimgpath = '/scripts/themes/coffee/images';
      var gridDataUrl = '/Claim/DynamicGridData/';
      jQuery(document).ready(function() {
          // $("#btnSearch").click(function() {
          var StateId = document.getElementById('StateId').value;
          var CityId = document.getElementById('CityId').value;
          var HName = document.getElementById('HospitalName').value;
//          alert(CityId);
//          alert(StateId);
//          alert(HName);
          if (StateId  0 && CityId == '' && HName == '') {
              CityId = 0;
              HName = 'Default'.toString();
//              alert("elseif0" + HName.toString());
          }
          else if (CityId  0 && StateId == '') {
//              alert("elseif1");
              alert("Please Select State..")
          }
          else if (CityId  0 && StateId  0 && HName == '') {
//              alert("elseif2");
              alert(CityId);
              alert(StateId);
              HName = "Default";
          }
          else {
//              alert("else");
              StateId = 0;
              CityId = 0;
              HName = "Default";
          }
          jQuery("#list").jqGrid({
              url: gridDataUrl + '?StateId=' + StateId + '&CityId=' + CityId + '&hospname=' + HName,
              datatype: 'json',
              mtype: 'GET',
              colNames: ['Id', 'HospitalName', 'Address', 'City', 'District', 'FaxNumber', 'PhoneNumber'],
              colModel: [{ name: 'HospitalId', index: 'HospitalId', width: 40, align: 'left' },
                               { name: 'HospitalName', index: 'HospitalName', width: 40, align: 'left' },
                               { name: 'Address1', Address: 'Address1', width: 300 },
                               { name: 'CityName', index: 'CityName', width: 100 },
                               { name: 'DistName', index: 'DistName', width: 100 },
                               { name: 'FaxNo', index: 'FaxNo', width: 100 },
                               { name: 'ContactNo1', index: 'PhoneNumber', width: 100 }
                            ],
              pager: jQuery('#pager'),
              rowNum: 10,
              rowList: [5, 10, 20, 50],
              // sortname: 'Id,',
              sortname: '1',
              sortorder: "asc",
              viewrecords: true,
              //multiselect: true,
              //multikey: "ctrlKey",
              // imgpath: '/scripts/themes/coffee/images',
              imgpath: gridimgpath,
              caption: 'Hospital Search',
              width: 700,
              height: 250
          });
          $(function() {
              // $("#btnSearch").click(function() {
          $('#CityId').change(function() {
          alert("kjasd");
                  // Set the vars whenever the date range changes and then filter the results
                  StateId = document.getElementById('StateId').value;
                  CityId = document.getElementById('CityId').value;
                  HName = 'default';
                 setGridUrl();
              });
              // Set the date range textbox values
              $('#StateId').val(StateId.toString());
              $('#CityId').val(CityId.toString());
              // Set the grid json url to get the data to display
               setGridUrl();
          });
          function setGridUrl() {
              alert(StateId);
              alert(CityId);
              alert("hi");
              var newGridDataUrl = gridDataUrl + '?StateId=' + StateId + '&CityId=' + CityId + '&hospname=' + HName;
              jQuery('#list').jqGrid('setGridParam', { url: newGridDataUrl }).trigger("reloadGrid");
          }
          //  });
      });
     
<%--<%using (Html.BeginForm("HospitalSearch", "Claim", FormMethod.Post, new { id = "TheForm" }))
--%
   
        
            
                Hospital Search
            
                
            
        
        
            
               
            
        
        
            
                
                    
                        
                         State :    
                          City :  
                          Hospital Name :      
                          
                        
                    
                
            
           
        
            
         
        
    
    <div id="jqGridContainer">  
       <table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
    </div>