When I Select Dropdown List Value That Information Will Be Shown In Jqgrid

<table>
        <tr>
            <th>
                EmployeeNames
            </th>
            <td>
                <select id="employeenames">
                </select>
            </td>
        </tr>
        <tr>
            <th>
                WorkingHours
            </th>
            <td>
                <input id="txtworkinghours" type="text" onchange="result()" />
            </td>
        </tr>
        <tr>
            <th>
                Rate
            </th>
            <td>
                <input id="txtrate" type="text" onchange="result()" />
            </td>
        </tr>
        <tr>
            <th>
                Total
            </th>
            <td>
                <input id="txttotal" type="text" />
            </td>
        </tr>

        <tr>

            <td>
              <input type="button" id="btnsave" value="SAVE" onclick="return btnsave_onclick()" onclick="return btnsave_onclick()" />
            </td>
        </tr>
    </table>


<table id="employeehours" style="height: 100%; width: 100%">
    </table>
    <div id="employeehourspager">
    </div>
</asp:Content>

var grid = $("#employeehours");
   $("#employeehours").jqGrid({

       datatype: function (postdata) {
           $.ajax({
               url: "EmployeeHours.aspx/employeehoursdetails",
               type: "POST",
               contentType: "application/json; charset=utf-8",
               data: JSON.stringify(postdata),
               dataType: "json",
               success: function (data, st) {

                   if (st == "success") {
                       var grid = $("#employeehours")[0];
                       grid.addJSONData(JSON.parse(data.d));

                   }
               },
               error: function () {
                   alert("YOU DID MISTAKE");
               }
           });
       },
       colNames: ['Empid', 'EmpHoursId', 'FirstName', 'LastName', 'WorkingDate', 'WorkedHours', 'rate', 'total', 'mode'],
       colModel: [{ name: 'Empid', index: 'Empid', key: true, hidden: true, width: 50, sorttype: "int", align: 'left', sortable: true, editable: true },
                  { name: 'EmpHoursId', index: 'EmpHoursId', key: true, hidden: true, width: 50, sorttype: "int", align: 'left', sortable: true, editable: true },
                       { name: 'FirstName', index: 'FirstName', width: 150, sorttype: "string", align: 'left', sortable: true, editable: true,
                           editrules: {}, formoptions: { rowpos: 2, colpos: 1 }
                       },
                       { name: 'LastName', index: 'LastName', width: 150, sorttype: "string", align: 'left', sortable: true, editable: true,
                           editrules: {}, formoptions: { rowpos: 2, colpos: 1 }
                       },

                  { name: 'WorkingDate', index: 'WorkingDate', width: 75,
                      formatter: 'date', srcformat: 'yyyy-mm-dd', newformat: 'm-d-Y', edittype: 'text', editable: true,
                      editoptions: { dataInit: function (el) { setTimeout(function () { $(el).datepicker(); }, 200); }, formoptions: { rowpos: 6, colpos: 1} }

                  },

                       { name: 'WorkedHours', index: 'WorkedHours', width: 150, sorttype: "string", align: 'left', sortable: true, editable: true,
                           editrules: {}, formoptions: { rowpos: 8, colpos: 1 }
                       },
                        { name: 'rate', index: 'rate', width: 100, sorttype: "string", align: 'left', sortable: true, editable: true, edittype: 'text', editrules: {}, formoptions: { rowpos: 8, colpos: 2 }
                        },

                        { name: 'total', index: 'total', width: 100, sorttype: "string", align: 'left', sortable: true, editable: true, edittype: 'text', editoptions: { maxlength: "10" },
                            editrules: {}, formoptions: { rowpos: 10, colpos: 1 }
                        },
                        { name: 'mode', index: 'mode', width: 100, sorttype: "string", align: 'left', sortable: true, editable: true, edittype: 'text', editoptions: { maxlength: "10" },
                            editrules: {}, formoptions: { rowpos: 10, colpos: 2 }
                        }],






       rowNum: 10,
       mtype: 'GET',
       loadonce: true,
       rowList: [10, 20, 30],
       pager: '#employeehourspager',
       sortname: 'EmpId',
       viewrecords: true,
       sortorder: 'desc'

   });
   $('#employeehours').jqGrid('navGrid', '#employeehourspager',
                  {
                      key: true,
                      edit: true,
                      add: true,
                      del: true,
                      search: true,
                      width: 600,
                      viewrecords: true,
                      gridview: true


                  });