Boostrap Select с параметрами отправки ajax

Я новичок в jquery и нашел этот отличный плагин: https://silviomoreto.github.io/bootstrap-select/

Моя страница имеет 2 выбора с использованием ajax: сначала ищет продукт и его код; Второй выбор ищет количество запаса для каждой единицы выбранного продукта. Я понял, что приведенный ниже код не анализирует код продукта для второго вызова AJAX.

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);

Параметр p: document.getElementById('item'). Value, как вы можете видеть. Я полагаю, эта команда выполняется после загрузки страницы. Как я могу разобрать первое выбранное значение для второго вызова ajax>

Источник

1 ответ

См. Эту ссылку, вы должны использовать функцию для параметра данных:

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

Только что получил ответ... Используйте обновление перед вызовом ajax...

$('.selectpicker').selectpicker('refresh');
Источник
Другие вопросы по тегам