克隆引导选择在同一页

我想克隆引导选择字段，但克隆它后，克隆选择不要选择任何东西。克隆引导选择在同一页

这是我的标记：

 <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

克隆引导选择在同一页

回答

相关问题