如何使用实时搜索在选择下拉列表中获取动态值

Question

这是我使用添加行按钮进行实时搜索下拉列表的代码。请告诉我如何通过实时搜索在此下拉列表中获取一些动态值。

$('.selectpicker').on('hidden.bs.select', function(e) {
  $('.selectpicker').selectpicker({
    style: 'btn-info',
    size: 4,
    liveSearch: true
  });
});
$(document).ready(function() {
  var i = 1;
  $("#add_row").click(function() {
    $('#dataTable').append('<tr id="addr' + i + '"></tr>');
    $('#addr' + i).html("<td><input type='checkbox' name='chk'/></td><td><select  id='itemdrop' class='selectpicker' data-live-search='true' name = 'name" + i + "'><option   value=' '> </option></select></td><td><input type='text' id='description' class='form-control' name='details'</td><td><input type='text' id='qty' class='form-control' name='qty' onkeyup='quantityAmountCount()'></td><td><input type='text' id='rate'  class='form-control ' name='rate' readonly=''></td><td><select class='bg-focus form-control' style='width: 120px;' id='tax' onchange='taxcount()'><option value='0'>0%</option><option value='5' >5%</option><option value='12' >12%</option><option value='18'>18%</option><option value='28'>28%</option></select></td><td><input type='text' id='sgst' class='form-control' name='sgst' placeholder='0.0' readonly=''></td><td><input type='text' id='cgst' class='form-control' name='cgst' placeholder='0.0' readonly=''></td><td><input type='text' class='form-control ' id='discount' value='' name='discount' onkeyup='discountCount()' placeholder='0.0'></td><td> <input type='text' id='discountRs' class='form-control' name='discount' placeholder='0.0'></td><td><input type='text' class='form-control lvtotal' readonly='' value='' id='amount' placeholder='0.0'></td>");
   // $('.selectpicker').selectpicker('refresh');
    i++;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="dataTable"></table><input type="button" class="btn btn-white" value="+Add Row" id="add_row" />

Answer 1

获得要添加的值后，可以在创建时将它们设置为下拉列表，如下所示：

更新：如果你可以将数据库值放入一个数组中，你可以将html拆分为三个字符串，并使用for循环将每个值添加到选择中。下面的示例显示了我的数组 x 硬编码，然后添加每个值。

var x = ["1", "2", "3", "4"]
$('.selectpicker').on('hidden.bs.select', function(e) {
  $('.selectpicker').selectpicker({
    style: 'btn-info',
    size: 4,
    liveSearch: true
  });
});
$(document).ready(function() {
  var i = 1;
  $("#add_row").click(function() {
    $('#dataTable').append('<tr id="addr' + i + '"></tr>');
    var strStr = "<td><input type='checkbox' name='chk'/></td><td><select  id='itemdrop' class='selectpicker' data-live-search='true' name = 'name" + i + "'><option   value=' '> </option>"
    var strEnd = "</td><td><input type='text' id='description' class='form-control' name='details'</td><td><input type='text' id='qty' class='form-control' name='qty' onkeyup='quantityAmountCount()'></td><td><input type='text' id='rate'  class='form-control ' name='rate' readonly=''></td><td><select class='bg-focus form-control' style='width: 120px;' id='tax' onchange='taxcount()'><option value='0'>0%</option><option value='5' >5%</option><option value='12' >12%</option><option value='18'>18%</option><option value='28'>28%</option></select></td><td><input type='text' id='sgst' class='form-control' name='sgst' placeholder='0.0' readonly=''></td><td><input type='text' id='cgst' class='form-control' name='cgst' placeholder='0.0' readonly=''></td><td><input type='text' class='form-control ' id='discount' value='' name='discount' onkeyup='discountCount()' placeholder='0.0'></td><td> <input type='text' id='discountRs' class='form-control' name='discount' placeholder='0.0'></td><td><input type='text' class='form-control lvtotal' readonly='' value='' id='amount' placeholder='0.0'></td>"
    
var strMid = ""
for(var z = 0; z<= x.length-1; z++){
strMid += "<option   value='" + x[z] + " '>" + x[z] + " </option>"
}
    $('#addr' + i).html(strStr + strMid + strEnd);
    i++;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="dataTable"></table><input type="button" class="btn btn-white" value="+Add Row" id="add_row" />