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

Question

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

incorrect

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

correct

感觉就像在 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>');
            });
        }
    }
}

Answer 1

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

dropdown = $('#templateGroupName');

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

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