无法从过滤器中获取值以发布在我的jqgrid上

我有一个jqGrid和一些筛选字段、2个组合框和2个jQuery ui日期选择器。当我试图发布字段中的值时，我只得到原始值。例如，我的组合框以一个"all"选项开始，该选项的值为-1，无论我选择哪个选项，-1都将被发布。两个约会对象也是如此，我只得到"；

这是我的代码：

<?php 
    require_once 'DAO/programaDAO.php';
?>
<script>
$(document).ready(function(){     
    $( "#buscarBtn" ).button().click(function(){
            $("#gdCiclos").trigger('reloadGrid');
    });
    $( "#from" ).datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      numberOfMonths: 3,    
      onClose: function( selectedDate ) {
        $( "#to" ).datepicker( "option", "minDate", selectedDate );
      }
    });
    $( "#to" ).datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      numberOfMonths: 3,
      onClose: function( selectedDate ) {
        $( "#from" ).datepicker( "option", "maxDate", selectedDate );
      }
    });
    $(function () {
    $("#gdCiclos").jqGrid({
        url:'sampleData.php',
        postData: {fechafin:document.getElementById('to').value, fhechainicial:document.getElementById('from').value, programaSelect:document.getElementById('selectPrograma').value, estadoSelect:document.getElementById('selectEstado').value},
        datatype: 'json',
        mtype: 'POST',
        colNames:['Ciclo Nº','Fecha Inicio', 'Fecha Fin', 'Programa', 'Estado'],
        colModel:[
        {name:'Ciclo Nº', index:'id', width:80, resizable:false, align:"center"},
        {name:'Fecha Inicio', index:'FechaInicio', width:200,resizable:false, sortable:true},
        {name:'Fecha Fin', index:'FechaFin', width:200,resizable:false, sortable:true},
        {name:'Programa', index:'Programa', width:165,resizable:false, sortable:true},
        {name:'Estado', index:'Estado', width:165, sortable:true}
        ],       
        pager: "#pagerGdCiclos",
        rowNum: 30,
        rowList: [10, 30, 100],
        sortname: "FechaInicio",
        sortorder: "desc",
        viewrecords: true,
        gridview: true,
        autoencode: true,
        caption: "Ciclos",
        height:'auto'
    });
});
 });

</script>
<div id="filtrosBusqueda">
                <div id="divBusProg">
                <label id="labelPrograma" class="labelBusquedaItem">Programa: </label>
                <?php
                    $eqId = $_GET['eqId'];
                    $listaProgramas = getTiposProgramasByEquipo($eqId);
                    echo("<select id='"selectPrograma'" class='"selectBox'">");
                        echo '<option value="-1">Todos</option>';
                    foreach ($listaProgramas as $value) {
                        echo '<option value="'.$value['programa_id'].'">'.$value['descripcion'].'</option>';
                    }
                    echo("<select id='"selectPrograma'">");
                ?>
             </div>
    <div id="divBusEst">
                <label id="labelPrograma" class="labelBusquedaItem">Estado: </label>
            <?php
                $listaEstados = getEstados();
                echo("<select id='"selectEstado'" class='"selectBox'">");
                    echo '<option value="-1">Todos</option>';
                foreach ($listaEstados as $value) {
                    echo '<option value="'.$value['ciclo_estado_id'].'">'.$value['descripcion'].'</option>';
                }
                echo("</select>");
            ?>
    </div>
    <div id="divBusRangoFecha">
        <label for="from" class="labelBusquedaItem">Desde: </label>
        <input type="text" id="from" name="from" class="selectBox" />
        <label for="to" class="labelBusquedaItem">Hasta: </label>
        <input type="text" id="to" name="to" class="selectBox" />
    </div>
    <a href="#" id="buscarBtn">Buscar</a>
    </div>
<div    id="gridBusqueda">
    <table id="gdCiclos"></table>
    <div id="pagerGdCiclos"> </div>
</div>