Javascript HTML选择在通过JQuery填充后不刷新

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

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

这感觉就像是在jquery呈现新选项元素之前出现了下拉列表。我试着找个地方重新渲染，但运气不好

这感觉应该是一个非常简单的解决方案，但我对编写脚本和挣扎还不熟悉

HTML

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>');
            });
        }
    }
}

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

dropdown = $('#templateGroupName');

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

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

---

当在打开时插入选项时，浏览器会感到困惑。公平地说，您的用户可能也会感到困惑

如果您正在等待加载，请告诉他们等待。 如果某些东西不可用，请禁用它

将这两项放在一起：用户第一次将鼠标悬停在上，禁用它并将光标设置为加载轮。等待数据加载，然后插入选项，重新启用并切换回光标

变量帮助程序={ buildDropdown:functionresult、dropdown、emptyMessage{ dropdown.html； 追加“${emptyMessage}”； 如果！！结果{ $.eachresult，functionk，v{ dropdown.append` ${v.Name} `; }; } } } const$DROPDOWN=$'templateGroupName'； //使用jQueryone只触发一次click事件 $DROPDOWN.one'mouseenter'，\uU9=>{ //加载选项时禁用下拉菜单 $DROPDOWN.attr'disabled'，true 控制台。记录“加载选项…”； //用GET请求替换内容 setTimeoutfunction{ helpers.build下拉列表 Array.from{ 长度：30 }，i=>{ Id:我， 姓名：i }, $DROPDOWN， “选择一个选项” ; //加载并插入选项后取消禁用 $DROPDOWN.attr'disabled'，false }, 1000; } /*加载时显示加载轮*/ 选择。自定义选择[禁用]{ 光标：等待； } 请选择一个组

---

因为您正在异步添加它们。。。

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