Question

我正在尝试使用jquery使用ajax调用填充html select。我可以看到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

修改DOM后，根据documentation $('.chosen-select').trigger('chosen:updated')的要求。

DOM已更新，但是更改在浏览器中不可见

1 个答案: