带有ajax发送参数的Bootstrap Select答案

【问题标题】：Boostrap Select with ajax sending parameters带有ajax发送参数的Bootstrap Select
【发布时间】：2017-05-20 19:44:57
【问题描述】：

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

【问题讨论】：

你不能像这样重写$('.with-ajax').selectpicker().ajaxSelectPicker(options)和$(.with-ajax2').selectpicker().ajaxSelectPicker(options2)

标签： jquery ajax bootstrap-select bootstrap-selectpicker

【解决方案1】：

刚刚得到答案... 在调用 ajax 之前使用 refresh...

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

【讨论】：

【解决方案2】：

看到这个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
        };
    }

【讨论】：