附加时引导多选下拉菜单不起作用

Question

我在单击按钮时将一个包含多个选择下拉列表的 html 附加到另一个 div；但在附加 div 多选下拉列表后不起作用。这是我的代码Example

请帮我解决这个问题。谢谢

Answer 1

请找到下面提到的解决方案。

在 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/

如果它不起作用，请告诉我。

Answer 2

这里有一个解决方案在你自己的小提琴中。

问题很简单 - 问题是当我们附加代码时，我们必须 destroy 任何在其中使用的 plugin 和 re-init 再次强>.

因为 append 只复制 HTML 代码并重新粘贴，所以当插件被调用到页面中时它永远不会出现在 dome 中，因此插件将无法与附加元素一起使用。为此，我们必须召回插件。

希望它对您干杯有帮助。

这是回答者的链接jsfiddle

Answer 3

调用多选前保存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 4

这里有解决方案https://fiddle.jshell.net/0tpLod7h/1/

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

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

您可以附加当前代码的直接 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/