动态添加下拉选项

我有大约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)); 
    }          } 
});

来源

2014-06-11 premsh

你可以设置一个jsfiddle来演示这个问题吗？ –

我怀疑问题出在'getSelectOptions'中。它使用AJAX吗？然后，您需要阅读http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call – Barmar

请参阅jsFiddle：http://jsfiddle.net/premsh/ 9xfpY/1/ 即使使用静态值，我也必须单击下拉菜单两次以获取更新的值。 – premsh

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

为了减轻这一点，请使用单击前发生的事件。我建议使用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)); 
});

显然，这将不利于控制的触摸屏，或者如果用户切换到元素，但主要的一点是，你需要填充的选择是不是以后需要之前。

来源

2014-06-11 20:21:53

是的，你说得对。这是解决问题的最佳方法吗？似乎工作。感谢您的输入！ – premsh

@PremShrestha我不知道更简单的方法，如果你想使用标准选择。 –

@PremShrestha如果你的API调用非常快，如果你真的想避免加载选项，你可以考虑使用'mousedown'而不是'mouseover'。 –

你说你正在做一个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); 
       } 
      }); 
     } 
});

来源

2014-06-11 20:16:56 Tom

我们假设这不是一个API调用。这里是jsFiddle演示：http://jsfiddle.net/premsh/9xfpY/1/ 我想添加这些静态值，当我点击下拉列表。在上面的JSFiddle中，我们需要点击两次才能看到更新的值。 – premsh

小提琴按我的意图工作。 – Tom

动态添加下拉选项

回答

相关问题