带有ajax发送参数的Bootstrap Select

Posted 2023-05-07

【中文标题】带有ajax发送参数的Bootstrap Select

【英文标题】：Boostrap Select with ajax sending parameters

【发布时间】：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)

【参考方案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
        ;