DOM обновлен, однако изменения не видны в браузере

Question

Я пытаюсь заполнить выбор HTML с помощью вызова ajax, используя jquery. Я вижу, что DOM обновляется с данными из базы данных, однако обновленные параметры не отображаются в браузере.

Вот статический html:

<td>
    <div>
      <select data-placeholder="-Role-" multiple class="chosen-select"
                                        style="width:170px;">
       <option value="TEST_ROLE1">TEST_ROLE1</option>
       <option value="TEST_ROLE2">TEST_ROLE2</option>
      </select>
      <span userId="grouproleError" class="alert alert-danger col-sm-4"
                                        style="display:none"></span>
    </div>
</td>

Ниже приведен код скрипта:

$(document).ready(function () {
            $('.chosen-select').chosen({}).change(function (obj, result) {
                console.debug("changed: %o", arguments);
                console.log("selected: " + result.selected);
            });
            /**
             * Get All roles
             **/
            console.log('Getting all roles..' + new Date().toLocaleString());
            $.ajax({
                url: "http://localhost:8081/admin/roles/getallroles",
                context: document.body,
                dataType: "json",
                type: "GET",
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    var list = $(".chosen-select");
                    $.each(data, function (index, item) {
                        list.append(new Option(item.rolesShortName, item.rolesShortName));
                    });
                    console.log('Roles fetched:' + JSON.stringify(data));
                },
                error: function () {
                    window.location.replace("http://localhost:8081");
                }
            });

            $('form').submit(function (event) {
                register(event);
            });
        });

        $(document).ajaxStop(function () {
            $(".log").text("Triggered ajaxStop handler.");
        });
}

Вы можете видеть, что статические параметры - единственные отображаемые параметры. Параметры, извлеченные из базы данных, обновляются в DOM, однако они не отображаются. Что ты думаешь я делаю не так?

Answer 1

Согласно документации $('.chosen-select').trigger('chosen:updated') требовалось после модификации DOM.