jquery - Bootstrap Select 与 ajax 发送参数

Question

我是 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 调用>

Answer 1

查看此link ，您应该使用函数作为数据参数:

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