克隆引導選擇在同一頁

我想克隆引導選擇字段，但克隆它後，克隆選擇不要選擇任何東西。克隆引導選擇在同一頁

這是我的標記：

 <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刷新命令：結果是，我不得不克隆DIV中的第二selectpicker。

來源

2017-11-25 Dmitry Malys

我這裏試試你的代碼：https://jsfiddle.net/cfasol/kt3myqtr/，它工作正常，但我想，如果你選擇一個選項，第二個下拉selectpicker已竊聽，因爲它選擇第一個下拉元素 –

@ C.Fasolin任何想法，也許你可以建議一個替代？ –

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>

來源

2017-11-25 15:20:45

克隆引導選擇在同一頁

回答

相關問題