引导选择刷新并显示data-live-search =“ true”

Question

我正在使用jQuery插件引导选择

我的密码

$('.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(){
  $('#addr'+i).html("<td>"+ (i+1) +"</td><td><select class='selectpicker'
   data-'live-search=true' name='name"+i+"'><option>Mustard</option>
  <option>Ketchup</option><option>Relish</option></select> </td><td><input  
  name='mail"+i+"' type='text' placeholder='Mail'  class='form-control 

 input-md'>
   </td><td><input  name='mobile"+i+"' type='text' placeholder='Mobile'  
   class='form-control input-md'></td>");

  $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');

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

  i++; 
 });

但是刷新后，我没有在新刷新的下拉列表中添加data-live-search =“ true”类。

有什么建议吗？ 在此插件中执行新命令后的每个下拉菜单中，我都需要data-live-search =“ true”。

我的HTML

<div class="container">
<div class="row clearfix">
    <div class="col-md-12 column">
        <table class="table table-bordered table-hover" id="tab_logic">
            <thead>
                <tr >
                    <th class="text-center">
                        #
                    </th>
                    <th class="text-center">
                        Name
                    </th>
                    <th class="text-center">
                        Mail
                    </th>
                    <th class="text-center">
                        Mobile
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr id='addr0'>
                    <td>
                    1
                    </td>
                    <td>
                     <select class="selectpicker" data-live-search="true">
                      <option>Mustard</option>
                      <option>Ketchup</option>
                      <option>Relish</option>
                    </select>
                    </td>
                    <td>
                    <input type="text" name='mail0' placeholder='Mail' 
      class="form-control"/>
                    </td>
                    <td>
                    <input type="text" name='mobile0' placeholder='Mobile' 
     class="form-control"/>
                    </td>
                </tr>
                <tr id='addr1'></tr>
            </tbody>
        </table>
        </div>
     </div>
      <a id="add_row" class="btn btn-default pull-left">Add Row</a><a 
     id='delete_row' class="pull-right btn btn-default">Delete Row</a>
    </div>  

Answer 1

你有

data-'live-search=true'

它应该是

data-live-search='true'

 $('.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() { $('#tab_logic').append('<tr id="addr' + i + '"></tr>'); $('#addr' + i).html("<td>" + i + "</td><td><select class='selectpicker' data-live-search='true' name = 'name" + i + "'><option >Mustard</option><option>Ketchup</option><option>Relish</option></select></td><td><input name='mail" + i + "'type='text'placeholder='Mail' class= 'form-control input-md'></td><td><input name='mobile" + i + "' type='text' placeholder='Mobile' class='form-control input-md'/></td>"); $('.selectpicker').selectpicker('refresh'); i++; }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css" rel="stylesheet" /> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <table id="tab_logic"> </table> <button id="add_row">Add Table Row</button>