javascript - 在同一页面中克隆 Bootstrap-select

Question

我正在尝试克隆 Bootstrap 选择字段，但在克隆它之后，克隆的选择不选择任何内容。

这是我的标记:

     <div class="form-group car-list">
         <label class="col-md-3 control-label">Select car #1</label>
         <div class="col-md-9">
            <div class="input-group">
               <select  class="select-car" data-live-search="true">
                  <option></option>
                  <option value="1">option 1</option>
                  <option value="2">option 2</option>
               </select>
            </div>
        </div>
    </div>

还有我的js:

$(document).ready(function() {
    $('.select-car').selectpicker();
});

$('#add').click(function () {
    var n = $('.car-list').length + 1;
    var temp = $('.form-group:last').clone(true);
    $('.control-label:first', temp).html('Select car #' + n);
    $('.form-group:last').after(temp);
});

我尝试使用 selectpicker refresh 命令:结果是我在克隆的 div 中有第二个 selectpicker。

Answer 1

Working Fiddle .

您可以使用在每个克隆中调用的选择模型，然后在克隆之后初始化选择，如下所示:

$('#add').click(function() {
    var n = $('.car-list').length + 1;
    var temp = $('.form-group:last').clone(true).removeClass('select-car');
    $('.control-label:first', temp).html('Select car #' + n);
    $('.input-group', temp).html($('#select-model').html());
    $('.select-car', temp).selectpicker();

    $('.form-group:last').after(temp);
});

可运行代码段:

$('#add').click(function() {
  var n = $('.car-list').length + 1;
  var temp = $('.form-group:last').clone(true).removeClass('select-car');
  $('.control-label:first', temp).html('Select car #' + n);
  $('.input-group', temp).html($('#select-model').html());
  $('.select-car', temp).selectpicker();

  $('.form-group:last').after(temp);
});

.category {
  margin-left: -12px;
  font-size: 1.3em;
  /*safari won't respect many/any of these but color?*/
  /*font-style: italic;*/
  font-weight: bold !important;
  color: #000000 !important;
  /*straight black makes it pop*/
  /*background: #000;*/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.5/css/bootstrap-select.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.5/js/bootstrap-select.min.js"></script>


<div class="form-group car-list">
  <label class="col-md-3 control-label">Select car #1</label>
  <div class="col-md-9">
    <div class="input-group">
      <select class="select-car selectpicker" data-live-search="true">
        <option></option>
        <option value="1">option 1</option>
        <option value="2">option 2</option>
      </select>
    </div>
  </div>
</div>

<div id="select-model" class="hide">
  <select class="select-car" data-live-search="true">
    <option></option>
    <option value="1">option 1</option>
    <option value="2">option 2</option>
  </select>
</div>
<button id="add">Add</button>