Question

我有一些超级简单的代码，可以在点击时动态地向Select元素添加选项。（这些选项是从服务器发送的）

$document.on('click', 'select', function (this: HTMLSelectElement) {
    const slct = $(this);
    const isdict = slct.data<string>('dictionaryctrlr');
    if (!isdict) { return; }
    let querysrch = slct.data<string>('querysrch');
    querysrch = querysrch ? '&' + querysrch : '';
    const postData = slct.closest('.pseudoRec').find(':input').serializeArray();
    const posturl = getActionUrl2(isdict, 'GetSelectOptions', undefined, 'SelectFieldName=' + leftCutTill($(this).data<string>('selectfieldname')!, '.') + querysrch);
    $.ajax({
        url: posturl,
        data: postData,
        success: (data: any[] | undefined) => {
            if (!data) { return; }
            slct.find('option').filter(function (this: HTMLOptionElement) { return this.value && !this.selected; }).remove();
            for (let x of data) {
                var opt = new Option(x.Value, x.Key);
                this.add(opt);
            }
        }
    });
});

问题在于，即使添加了选项，用户也不会在打开的列表中看到它们，下拉菜单仍然显示为小/空。

只有当他重新单击时，它才会打开，并且所有选项都显示良好。

是否可以在某种“预扩展”事件中添加元素？或只是告诉下拉菜单调整其大小的方法？或其他一些想法？

谢谢！

动态添加选项后，选择尺寸未刷新

0 个答案: