javascript - Dynamic Bootstrap Multiselect の作成方法

Question

Bootstrap multiselect を使用しようとしています 、次のコードを使用しました

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>

とスクリプト

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

各オプションをブートストラップの複数選択に動的に追加しようとしていますが、正しく機能していません

ここのデモページ: http://jsfiddle.net/pL4hg76b/1/

しかし、静的に動作しています: http://jsfiddle.net/KyleMit/7yq7fvsq/

Answer 1

.multiselect('rebuild')使用後にマルチセレクトの方法を使用する必要があります.append()

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

更新されたフィドル

---

完全なコード

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

追加する必要があります

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

ボタンクリックイベントの最後に追加して、複数選択を再構築します。

Answer 3

リストappendをブートストラップulして、select

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

ここに新しいデモがあります: http://jsfiddle.net/pL4hg76b/2/