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

Check my answer which also allow you to Select All option from the clone dropdown. — Bhavin Solanki
– Bhavin Solanki, Commented Aug 2, 2017 at 5:42

Alex Mac · Accepted Answer · 2017-08-02 05:46:52Z

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.

Jithin Raj P R · Accepted Answer · 2017-08-02 05:38:29Z

1

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

answered Aug 2, 2017 at 5:38

Jithin Raj P R

6,8469 gold badges41 silver badges71 bronze badges

Comments

madalinivascu · Accepted Answer · 2017-08-02 05:24:49Z

1

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/

answered Aug 2, 2017 at 5:24

madalinivascu

32.4k4 gold badges41 silver badges59 bronze badges

1 Comment

vedankita kumbhar Over a year ago

Thanks @madalin ivascu. But I don't understand in my web page dropdown appending two time please see image imgur.com/xBeRD1Q. Can you please help me

Shiladitya · Accepted Answer · 2017-08-02 05:36:58Z

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>

Bhavin Solanki · Accepted Answer · 2017-08-02 05:38:02Z

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/

Collectives™ on Stack Overflow

Bootstrap Multiple select dropdown not working while appending

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related