javascript - jquery selectpicker 不适用于动态生成的内容

Question

我使用了以下库来设计选择框

https://silviomoreto.github.io/bootstrap-select/examples/

<select class="selectpicker" data-live-search="true">
  <option data-tokens="ketchup mustard">Hot Dog, Fries and a Soda</option>
  <option data-tokens="mustard">Burger, Shake and a Smile</option>
  <option data-tokens="frosting">Sugar, Spice and all things nice</option>
</select>

它在第一个 div 上工作正常。如果我使用 jquery 动态生成项目，那么它不会显示

$('#add_new_repair').click(function(){

 i++;

var mydata='<div class="item form-group"> <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">Model Parts Name <span class="required">*</span> </label> <div class="col-md-6 col-sm-6 col-xs-12"> <input id="brand_name" class="form-control col-md-7 col-xs-12" data-validate-length-range="6" data-validate-words="2" name="name" placeholder="Model Name e.g Nokia 1100" required="required" type="text"> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <button type="button" class="btn btn-primary" id="remove_repair_'+i+'" onclick="removeRow(this);> <span class="glyphicon glyphicon-minus" aria-hidden="true"> </span>Remove</button> </div> </div> <div class="item form-group"> <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">Model Parts Price <span class="required">*</span> </label> <div class="col-md-6 col-sm-6 col-xs-12"> <input id="brand_name" class="form-control col-md-7 col-xs-12" data-validate-length-range="6" data-validate-words="2" name="name" placeholder="Price" required="required" type="text"> </div> </div> <div class="item form-group"> <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">Model Parts Warrenty<span class="required">*</span> </label> <div class="col-md-6 col-sm-6 col-xs-12"> <select id="basic" class="selectpicker show-tick form-control" data-live-search="true"> <option value="AK" selected>---Select--</option> <option value="ss">Alaska</option> <option value="HI">Nokia</option> <option value="CA">Motorolla</option> <option value="NV">Samsung</option> <option value="OR">Oregon</option> <option value="WA">Washington</option> <option value="AZ">Arizona</option> <option value="CO">Colorado</option> </select> </div> </div> <div class="item form-group"> <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">Model Image <span class="required">*</span> </label> <div class="col-md-6 col-sm-6 col-xs-12"> <input type="file" id="input03" class="form-control"> </div> </div> <div class="ln_solid"></div>';
   var content = '<select class="pincode"><option value="1">1</option><option value="2">2</option></select>';
 $("#dynamic_data").append(mydata);


});

Answer 1

您正在动态生成选择列表，因此在附加内容后，您必须通过以下行强制呈现 selectpicker 以动态生成选择列表

$('.selectpicker').selectpicker('render');