Question

我有一个动态创建的按钮，点击后我想要更新模态中的选择列表。＆＃34; shown.bs.modal＆＃下创建了所有按钮，模态作品和控制台消息（＆＃34;追加......＆＃34;＆＃34;完成！＆＃34;） 34;事件处理程序正在打印出来。

<!-- Scripts -->
<script type="text/javascript">
    var element = $("#tableContainer");

    $("#seatPlayerModal").on("shown.bs.modal", function () {
        console.log("Appending ...");
        $("#player_select").append($("<option></option>").val(1).html("One"));
        $("#player_select").append($("<option></option>").val(2).html("Two"));
        $("#player_select").append($("<option></option>").val(3).html("Three"));
        console.log("Done!");
    });

    function drawSeat(seat) {
        if (seat.PlayerName == null)
        {
            var id = "seat-" + seat.Id;
            element.append("<button type='button' id = '" + id + "' class='seat-player btn btn-mdb'>Seat Player</button>");
            var button = $("#" + id);
            button.click(function () {
                $("#seatPlayerModal").modal('show');
            });
        }
        else
            element.append("<button type='button' class='seat-player btn btn-mdb'>Some player name ...</button>");
    };

    function drawTable(table) {
        element.append('<div id="' + table.Id + '"><h2 class="m-t-2">' + table.Name + '</h2></div>');
        $.each(table.Seats.Data, function (key, value) {
            drawSeat(value)
        });
    };

    function onSuccessGetTables(tables) {
        $.each(tables.Data, function (key, value) {
            drawTable(value);
        });
    };

    $(document).ready(function () {
        getTables(onSuccessGetTables)
    }); 
</script>

模态（在同一个文件中）：

<!-- Modal -->
<div id="seatPlayerModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Choose Player to be Seated</h4>
            </div>
            <div class="modal-body">
                <form id="seatPlayerForm">
                    <!-- Seat Id -->
                    <input type="hidden" id="Id" name="Id" value="0" />

                    <!-- Selected Player Id -->
                    <input type="hidden" id="SelectedPlayerId" name="SelectedPlayerId" value="0" />

                    <!-- Player List -->
                    <select id="player_select"></select>
                </form>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-default">Seat Player</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>

我不知道为什么选择列表没有更新。当我运行代码时，虽然简化了，但在jsfiddle中它可以运行。我已经检查了拼写错误的名称，但找不到任何内容，jQuery也没有打印出任何错误。

Answer 1

问题是我在不知情的情况下使用了selectize。

现在我添加这样的项目：

var accounts = $("#accounts")[0].selectize;
        $.each(data, function (index, value) {
            accounts.addOption({
                text: value.Name,
                value: value.Id
            });
        })

jQuery没有更新Modal中的选择列表

1 个答案: