引导多个选择下拉列表不工作，而追加

Question

我附加一个包含多个选择下拉列表的HTML另一个按钮点击另一个div;但在附加div多选select后下拉不起作用。这里是我的代码Example

请帮我这个。由于

Answer 1

这里一个soluition你在自己的提琴。

这个问题很简单 - 的事情是，当我们添加一个代码，我们必须destroy任何plugin这里面使用，re-init再次。

由于仅追加拷贝HTML代码和repaste它，它在圆顶从来就有，当插件被称为进入页面，所以插件不会附加元件工作。为此，我们不得不回想一下这个插件。

希望它对您的干杯有帮助。

这里的链接的answere jsfiddle

Answer 2

保存HTML调用多选之前，重建时将其追加多选

var html = $('#multiselect').html(); 

$('.multiselect-ui').multiselect({ 
     includeSelectAllOption: true 
    }); 

    $('#append-btn').click(function(){ 

    $(html).appendTo('.div2'); 
    $('.multiselect-ui').multiselect('rebuild') 
    }) 

演示：https://fiddle.jshell.net/wuyy56gs/

Answer 3

在这里，你去与解决方案https://fiddle.jshell.net/0tpLod7h/1/

var cnt = 2; 
 
var html = $('#multiselect').html(); 
 
$('.multiselect-ui').multiselect({ 
 
     includeSelectAllOption: true 
 
    }); 
 
    
 
    $('#append-btn').click(function(){ 
 
    \t \t cnt++; 
 
     \t $(html).appendTo('.div2'); 
 
\t  $('.div2 > div').last().find('select').attr('id', 'dates-field' + cnt); 
 
     $('#dates-field' + cnt).multiselect('rebuild'); 
 
    })

span.multiselect-native-select { 
 
\t position: relative 
 
} 
 
span.multiselect-native-select select { 
 
\t border: 0!important; 
 
\t clip: rect(0 0 0 0)!important; 
 
\t height: 1px!important; 
 
\t margin: -1px -1px -1px -3px!important; 
 
\t overflow: hidden!important; 
 
\t padding: 0!important; 
 
\t position: absolute!important; 
 
\t width: 1px!important; 
 
\t left: 50%; 
 
\t top: 30px 
 
} 
 
.multiselect-container { 
 
\t position: absolute; 
 
\t list-style-type: none; 
 
\t margin: 0; 
 
\t padding: 0 
 
} 
 
.multiselect-container .input-group { 
 
\t margin: 5px 
 
} 
 
.multiselect-container>li { 
 
\t padding: 0 
 
} 
 
.multiselect-container>li>a.multiselect-all label { 
 
\t font-weight: 700 
 
} 
 
.multiselect-container>li.multiselect-group label { 
 
\t margin: 0; 
 
\t padding: 3px 20px 3px 20px; 
 
\t height: 100%; 
 
\t font-weight: 700 
 
} 
 
.multiselect-container>li.multiselect-group-clickable label { 
 
\t cursor: pointer 
 
} 
 
.multiselect-container>li>a { 
 
\t padding: 0 
 
} 
 
.multiselect-container>li>a>label { 
 
\t margin: 0; 
 
\t height: 100%; 
 
\t cursor: pointer; 
 
\t font-weight: 400; 
 
\t padding: 3px 0 3px 30px 
 
} 
 
.multiselect-container>li>a>label.radio, .multiselect-container>li>a>label.checkbox { 
 
\t margin: 0 
 
} 
 
.multiselect-container>li>a>label>input[type=checkbox] { 
 
\t margin-bottom: 5px 
 
} 
 
.btn-group>.btn-group:nth-child(2)>.multiselect.btn { 
 
\t border-top-left-radius: 4px; 
 
\t border-bottom-left-radius: 4px 
 
} 
 
.form-inline .multiselect-container label.checkbox, .form-inline .multiselect-container label.radio { 
 
\t padding: 3px 20px 3px 40px 
 
} 
 
.form-inline .multiselect-container li a label.checkbox input[type=checkbox], .form-inline .multiselect-container li a label.radio input[type=radio] { 
 
\t margin-left: -20px; 
 
\t margin-right: 0 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="form-group" id="multiselect"> 
 
    <label class="col-md-4 control-label" for="rolename">Role Name</label> 
 
    <div class="col-md-4"> 
 
     <select id="dates-field2" class="multiselect-ui form-control" multiple="multiple"> 
 
      <option value="cheese">Cheese</option> 
 
      <option value="tomatoes">Tomatoes</option> 
 
      <option value="mozarella">Mozzarella</option> 
 
      <option value="mushrooms">Mushrooms</option> 
 
      <option value="pepperoni">Pepperoni</option> 
 
      <option value="onions">Onions</option> 
 
     </select> 
 
    </div> 
 
</div> 
 
<div class="div2"> 
 

 
</div> 
 

 
<button id="append-btn">Append 
 
</button>

Answer 4

您可以追加当前代码的直接html代码。 此示例还允许您从“克隆”下拉列表中选择“全部”选项。 例如：

<script> 
var i = 0; 
$('#append-btn').click(function(){ 
    var html = ''; 
    html += '<div class="form-group" id="multiselect">'; 
    html += '<label class="col-md-4 control-label" for="rolename">Role Name</label>'; 
    html += '<div class="col-md-4 test">'; 
    html += ' <select id="dates-field2" class="multiselect-ui'+i+' form-control" multiple="multiple">'; 
    html += '  <option value="cheese">Cheese</option>'; 
    html += '  <option value="tomatoes">Tomatoes</option>'; 
    html += '  <option value="mozarella">Mozzarella</option>'; 
    html += '  <option value="mushrooms">Mushrooms</option>'; 
    html += '  <option value="pepperoni">Pepperoni</option>'; 
    html += '  <option value="onions">Onions</option>'; 
    html += ' </select>'; 
    html += '</div>'; 
    html += '</div>'; 
    $(html).appendTo('.div2'); 
    $('.multiselect-ui'+i).multiselect({ 
     includeSelectAllOption: true 
    }); 
    i++ 
}); 
</script> 

这里是工作示例： https://fiddle.jshell.net/0tpLod7h/2/

Answer 5

请在以下提到的解决方案。

在html中，您需要创建如下所述的模板。

<div id="template" class="hidden"> 
    <div class="form-group" id="multiselect"> 
     <label class="col-md-4 control-label" for="rolename">Role Name</label> 
     <div class="col-md-4"> 
      <select id="dates-field2" class="multiselect-ui form-control" multiple="multiple"> 
       <option value="cheese">Cheese</option> 
       <option value="tomatoes">Tomatoes</option> 
       <option value="mozarella">Mozzarella</option> 
       <option value="mushrooms">Mushrooms</option> 
       <option value="pepperoni">Pepperoni</option> 
       <option value="onions">Onions</option> 
      </select> 
     </div> 
    </div> 
</div> 

这里是你的jQuery代码。

var html = $('#template').html(); 

$('.multiselect-ui').multiselect({ 
    includeSelectAllOption: true 
}); 

$('#append-btn').click(function() { 
    $(html).appendTo('.div2'); 
    $('.multiselect-ui').multiselect({ 
     includeSelectAllOption: true 
    }); 
}); 

您可以在这里找到工作小提琴：https://fiddle.jshell.net/wuyy56gs/1/

让我知道，如果它不工作。