如何动态克隆引导多选？

Question

$(function() {
  $('#days').multiselect({
    includeSelectAllOption: true
  });
  
  $('#btnSelected').click(function() {
    var selected = $("#days option:selected");
    var message = "";
    selected.each(function() {
      message += $(this).text() + " " + $(this).val() + "\n";
    });
    document.write(message);
  });
});

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"></script>


<select id="days" multiple="multiple">
  <option value="1">thusday</option>
  <option value="2">sunday</option>
  <option value="3">monday</option>
  <option value="4">tuesday</option>
  <option value="5">friday</option>
</select>
<input type="button" id="btnSelected" value="Get Selected" />
<button type="button" id="btn">+ Add Another Set OF Hourse
</button>

当我点击添加更多按钮时，我正在尝试做类似的事情，多选下拉菜单将被克隆。每当我点击提交时，它都会显示所有多选的选定值。

Answer 1

我添加了在单击添加按钮时克隆多选的功能。此外，我修改了选择方法以从所有多选下拉列表中获取所选值。

$('#days').multiselect({
  includeSelectAllOption: true
});

var i = 1;
$('#btnAddAnother').click(function(){
  var clone_multiselect = $("#days").clone();
  clone_multiselect.attr('id', 'days' + i);
  clone_multiselect.appendTo(".multiselect_container");

  $(clone_multiselect).multiselect({
    includeSelectAllOption: true
  });

  i++;
});
  
$('#btnGetSelected').click(function() {
  $('.results').empty();
  $('select.multiselect').each(function(){
    var id = $(this).attr('id');
    var selected_option_selector = '#' + id + ' option:selected';
    var result_str = '<b>' + id + '</b>: ';

    $(selected_option_selector).each(function(){
      result_str += $(this).text() + ' - ' + $(this).val() + ', ';
    });

    result_str = result_str.substring(0, result_str.length - 2);
    result_str += '<br />';
    $('.results').append(result_str);
  });
});

.results {
  margin-top: 20px;
}

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"></script>

<div class="multiselect_container">
    <select id="days" class="multiselect" multiple="multiple">
      <option value="1">thusday</option>
      <option value="2">sunday</option>
      <option value="3">monday</option>
      <option value="4">tuesday</option>
      <option value="5">friday</option>
    </select>
</div>

<br />
<button id="btnGetSelected" class="btn btn-primary">Get Selected</button>
<button id="btnAddAnother" class="btn btn-primary">+ Add Another Set OF Hourse</button>

<div class="results"></div>

Fiddle DEMO