Wie ein dynamisches Bootstrap Mehrfachauswahl erstellen

Question

Ich versuche Bootstrap Mehrfachauswahl zu verwenden, habe ich den folgenden 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> 

und Skript

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

ich bin versuchen jeder hinzuzufügen Option dynamisch zum Bootstrap Multiselect, aber es funktioniert nicht richtig

Demo pag e hier: http://jsfiddle.net/pL4hg76b/1/

Aber seine Arbeit statisch: http://jsfiddle.net/KyleMit/7yq7fvsq/

Answer 1

Sie können append Ihre Liste ul zu Bootstrap und zu Ihrem select

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

hier neue Demo ist: http://jsfiddle.net/pL4hg76b/2/

Answer 2

Sie müssen Verwenden Sie .multiselect('rebuild') Methode der Multiselect, nachdem Sie 01 verwenden

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

Updated Fiddle

---

Voll 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 
    }); 
}); 

Answer 3

Sie benötigen

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

hinzufügen

bis zum Ende des Klickereignisses, um die Mehrfachauswahl wiederherzustellen.