How to create a Dynamic Bootstrap Multiselect

Question

I am trying to use Bootstrap multiselect , I used the following code

html

<input type="text" id="addRow"/>
<input type="button" id="btn" value="Add"/>
<form id="form1">
   <div style="padding:20px">
     <select id="chkveg" multiple="multiple">
     </select>
   </div>
</form>

and script

$(function () {
    $('#btn').click(function () {
        var val = $("#addRow").val();
        var htm = '';
        htm += '<option>' + val + '</option>';
        $('#chkveg').append(htm);
    });
    $('#chkveg').multiselect({
        includeSelectAllOption: true
    });
});

i am try to add each option dynamically to the bootstrap multiselect but its not working properly

Demo page here : http://jsfiddle.net/pL4hg76b/1/

But its working statically : http://jsfiddle.net/KyleMit/7yq7fvsq/

Elfrieda

Answer 1

You need to use .multiselect('rebuild') method of multiselect after you use .append()

$('#chkveg').multiselect('rebuild');

Updated Fiddle

---

Full code

$(function () {
    $('#btn').click(function () {
        var val = $("#addRow").val();
        var htm = '';
        htm += '<option>' + val + '</option>';
        $('#chkveg').append(htm);
        $('#chkveg').multiselect('rebuild');
    });
    $('#chkveg').multiselect({
        includeSelectAllOption: true
    });
});

Ibert

Is there any way we can remove existing data in <options> – Lanza

@MangeshSathe I use this: $select.empty().append(options); $select.multiselect('rebuild'); – Minnie

Answer 2

You need to add

$('#chkveg').multiselect('rebuild');

to the end of your button click event to rebuild the multiselect.

Kilovolt

Answer 3

You can append your list to bootstrap ul and to your select

$('.multiselect-container').append(htm);
$('#chkveg').append(htm);

here is new Demo: http://jsfiddle.net/pL4hg76b/2/

Rutkowski

Not a good practice – Loudish