时间戳

首页 > 解决方案 > 通过 JQuery 填充后，HTML 选择不刷新

javascript - 通过 JQuery 填充后，HTML 选择不刷新

问题描述

我一直在使用 JQuery 在单击 HTML 选择元素时填充下拉列表。选项会被创建，但是在第一次单击时，选项会显示在一个带有滚动条的非常小的框中。见下文

不正确

如果我然后关闭并重新打开下拉列表，它会正确显示。如下。

正确的

感觉就像在 jquery 呈现新的选项元素之前出现了下拉列表。我试图找到重新渲染它，但没有运气。

感觉这应该是一个很容易解决的问题，但我对编写脚本和苦苦挣扎是新手。

HTML

<select class="custom-select" id="templateGroupName" name="templateGroupName">
    <option selected>Please Select a group</option>
</select>

JS - 包裹在 document.ready 中

$('#templateGroupName').click(function () {
    $.ajax({
        type: "GET",
        url: '/Layout/GetGroups',
        success: function (data) {
            helpers.buildDropdown(
                data,
                $('#templateGroupName'),
                'Select an option'
            );
        }
    });

});

var helpers =
{
    buildDropdown: function (result, dropdown, emptyMessage) {
        // Remove current options
        dropdown.html('');
        // Add the empty option with the empty message
        dropdown.append('<option value="">' + emptyMessage + '</option>');
        // Check result isnt empty
        if (result != '') {
            // Loop through each of the results and append the option to the dropdown
            $.each(result, function (k, v) {
                dropdown.append('<option value="' + v.Id + '">' + v.Name + '</option>');
            });
        }
    }
}

标签： javascriptjqueryhtmlhtml-select

解决方案

首先，您需要 a<select>作为父元素，而不是空元素，

dropdown = $('#templateGroupName');

然后将其作为文档元素插入，而不是字符串：

var opt = document.createElement('option');
opt.value = v.Id;
opt.innerHTML = v.Name;
dropdown.appendChild(opt);

推荐阅读