Question

我有大约25个下拉菜单并且不想加载所有这些下拉菜单，除非用户点击它们。我想仅在用户实际点击下拉菜单时加载drodown，因为每个下拉列表都与API调用相关联。

我有一个错误，只有在第二次点击后才会填充下拉列表，而不是第一次点击。变量有数据，但UI并没有反映出来。

有没有人有任何想法？这是它的样子：

tr.find("select").click(function () {
    if ($(this).children().length <= 1) { // checking no of options; first one is default   
        var fieldName = $(this).attr('id');
        var selectValues = scope.getFilterData({ fieldName: fieldName }); // get formatted option values
        $(this).append(getSelectOptions(selectValues));
    }                                        }
});

Answer 1

如果你等到用户点击，可能已经太晚了。浏览器尝试显示选项后添加选项。

要减轻这种情况，请使用在点击之前发生的事件。我建议使用jQuery.One来消除过度调用函数，这会使你的if语句变得不必要。

例如：

tr.find("select").one("mouseover", function () {
    var fieldName = $(this).attr('id');
    var selectValues = scope.getFilterData({
        fieldName: fieldName
    }); // get formatted option values
    $(this).append(getSelectOptions(selectValues));
});

显然，这对触摸屏或用户选中元素没有帮助，但主要的一点是你需要在不需要之后填充选择。

Answer 2

你说你正在进行API调用。

我假设getSelectOptions（selectValues）正在这样做。

问题是，你正在进行这个API调用，但$（this）.append（）不是在等待它，而只是不附加任何内容。

我认为第二次点击有效的原因是因为此时调用已经缓存了。

尝试在成功进行API调用后追加。为了帮助您，我们可能需要您的getSelectOptions函数。

你最终会得到类似的东西：

tr.find("select").click(function () {
        if ($(this).children().length <= 1) { // checking no of options; first one is default   
            var fieldName = $(this).attr('id');
            var selectValues = scope.getFilterData({ fieldName: fieldName }); // get formatted option values

            $.ajax({
                ... ,
                success: function(response) {
                   $(this).append(response);
                }
            });
        }
});

添加动态下拉选项

2 个答案: