Làm thế nào để tạo ra một động Bootstrap Multiselect

Question

Tôi cố gắng để sử dụng Bootstrap multiselect, tôi đã sử dụng đoạn mã sau

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> 

và kịch bản

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

tôi cố gắng thêm mỗi tùy chọn động để multiselect bootstrap nhưng không hoạt động đúng cách

Trang demo e ở đây: http://jsfiddle.net/pL4hg76b/1/

Nhưng lưu động tĩnh: http://jsfiddle.net/KyleMit/7yq7fvsq/

Answer 1

Bạn có thể append danh sách của bạn để bootstrap ul và bạn select

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

đây là Demo mới: http://jsfiddle.net/pL4hg76b/2/

Answer 2

Bạn cần phải sử dụng phương pháp .multiselect('rebuild') chọn nhiều sau khi bạn sử dụng .append()

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

Updated Fiddle

---

Full đang

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

Bạn cần phải thêm

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

vào cuối sự kiện nhấp vào nút của bạn để tạo lại nhiều lựa chọn.