Bootstrap Multiple select dropdown not working while appending

Question

I am appending html of one which contain multiple select dropdown to another another div on button click; but after appending div multiple select dropdown not working. Here is my code Example

Please help me with this. Thanks

Answer 1

Please find below mentioned solution.

In html you need to create template like describe below.

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

And here is your jQuery code.

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

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

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

You can find working fiddle here : https://fiddle.jshell.net/wuyy56gs/1/

Let me know if it not works.

Answer 2

Here a soluition for you in your own fiddle.

The issue was simple - The thing is that when we append a code we have to destroy any plugin which is used inside it and re-init it again.

Because append only copies the HTML code and repaste it, it will never there in the dome when the plugin was called into the page, so the plugin will not work with the appended element. For that we have to recall the plugin.

Hope it's helpful for your cheers.

Here is the link for the answere jsfiddle

Answer 3

You can append direct html code of your current code. This example also allow you to Select All option from the clone dropdown. For example :

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

Here is working example : https://fiddle.jshell.net/0tpLod7h/2/

Answer 4

Here you go with the solution 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

Save the html before you call multiselect, rebuild the multiselect when you append it

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

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

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

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

demo:https://fiddle.jshell.net/wuyy56gs/