クローンブートストラップ - 同じページで選択

Question

私はブートストラップの選択フィールドをクローンしようとしていますが、クローンを作成した後、クローンの選択は何も選択しません。私はselectpickerリフレッシュコマンドを使用しようと

$(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); 
}); 

：

 <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：

は、これが私のマークアップされ、結果は私がクローン化されたdivの内側の第二selectpickerを持っていたことでした。

Answer 1

Working Fiddle。

以下のスニペットのようなクローンが示された後、あなたはその後、選択INIT、すべてのクローンで呼び出さ選択モデルを使用することができます。

$('#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>