Boostrap Select with ajax sending parameters

Question

I am new to jquery and found this great plugin: https://silviomoreto.github.io/bootstrap-select/

My page has 2 selects using ajax: First looks for product and its code; Second select looks for stock quantity for each unit of the selected product. I realized the bellow code is not parsing the product code to second ajax call.

HTM:

<div class="form-inline">
<select id="select_1" name = "codprod_1" class="selectpicker with-ajax" data-live-search="true">
</select>
</div>  <table class="table table-bordered table-striped" id="tabela">
<thead>
<tr>
<th>
ITEM
</th>
<th>
PRODUTO
</th>
<th>
LOTE
</th>
<th>
QTDE
</th>
<th>
VALIDADE
</th>
</tr>
</thead>
<tbody>
<tr>
<td align=center><b>1</b></td>
<td align=left>
<div class="form-inline">
<select id="select_1" name = "codprod_1" class="selectpicker with-ajax" data-live-search="true">
</select>
</div>
</td>
<input type=hidden name="descprod_1" id="descprod_1" value="">
<td align=left>
<div class="form-inline">
<select id="Lote_1" name = "Lote_1" class="selectpicker with-ajax2" data-live-search="true">
</select>
</div>
   </td>
<td align=center>
<input type=text class="form-control" id="qtde_1" name="qtde_1" value="" size=5 maxlength=5></td>
<td align=center><input type=text class="form-control" name="val_1" value="" size=7 maxlength=7></td>
</tr>
<tr>
<td align=center><b>2</b></td>
<td align=left>
<div class="form-inline">
<select id="select_2" name = "codprod_2" class="selectpicker with-ajax" data-live-search="true">
</select>
</div>
</td>
<input type=hidden name="descprod_2" id="descprod_2" value="">
<td align=left>
<div class="form-inline">
<select id="Lote_2" name = "Lote_2" class="selectpicker with-ajax2" data-live-search="true">
</select>
</div>
   </td>
<td align=center>
<input type=text class="form-control" id="qtde_2" name="qtde_2" value="" size=5 maxlength=5></td>
<td align=center><input type=text class="form-control" name="val_2" value="" size=7 maxlength=7></td>
</tr>
<tr>
<td align=center colspan="3">TOTAL</td>
<td align=center><div id="QtdTotal">0</div></td>
<td align=center>&nbsp;</div></td>
</tr>
</table>

Javascript:

<script language="Javascript">
var options = {
     ajax          : {
     url     : 'ajax_ConsultaProduto.asp',
     type    : 'POST',
     dataType: 'json',
     // Use "{{{q}}}" as a placeholder and Ajax Bootstrap Select will
     // automatically replace it with the value of the search query.
     data    : {
         q: '{{{q}}}'
     }
       },
      locale        : {
      emptyTitle: 'Código ou descrição do produto'
      },
      log           : 0,
    preprocessData: function (data) {
        var i, l = data.length, array = [];
        if (l) {
        for (i = 0; i < l; i++) {
            array.push($.extend(true, data[i], {
            text : data[i].descricao,
            value: data[i].codigo,
            data : {
                subtext: data[i].sigla
            }
            }));
        }
        }
        // You must always return a valid array when processing data. The
        // data argument passed is a clone and cannot be modified directly.
      return array;
      }
  };

var options2 = {
     ajax          : {
     url     : 'ajax_ConsultaLote.asp',
     type    : 'POST',
     dataType: 'json',
     // Use "{{{q}}}" as a placeholder and Ajax Bootstrap Select will
     // automatically replace it with the value of the search query.
     data    : {
         q: '{{{q}}}', p: document.getElementById('item').value
     }
       },
      locale        : {
      emptyTitle: 'Lote do Produto'
      },
      log           : 0,
    preprocessData: function (data) {
        var i, l = data.length, array = [];
        if (l) {
        for (i = 0; i < l; i++) {
            array.push($.extend(true, data[i], {
            text : data[i].descricao,
            value: data[i].codigo,
            data : {
                subtext: data[i].sigla
            }
            }));
        }
        }
        // You must always return a valid array when processing data. The
        // data argument passed is a clone and cannot be modified directly.
      return array;
      }
  };

$('.selectpicker').selectpicker().filter('.with-ajax').ajaxSelectPicker(options);
$('.selectpicker').selectpicker().filter('.with-ajax2').ajaxSelectPicker(options2);

The parameter is p: document.getElementById('item').value as you can see. I suppose this command runs once the page is loaded. How can I parse the first selected value to the second ajax call>

Answer 1

See this link, you should use function for data parameter:

data : function() { // This is a function that is run on every request
        return {
           q: '{{{q}}}',
           nama:$("#contoh").val()//this is an input text HTML
        };
    }

Answer 2

Just got the answer ... Use refresh before calling the ajax...

$('.selectpicker').selectpicker('refresh');