Question

In this jsfiddle,我正在向#type动态添加选项，这是一个引导选择选择器。填好后，我正在调用getMenus()使用#type中的ID属性进行另一个ajax调用，并为第二个选择选择器#filters填充值。

第一个选择填充正常，但值未定义。无论我做什么，我似乎无法识别选择中的选项。

加载页面后，如果我更改#type，则会触发更改事件，一切都按照应有的方式发生。它似乎只影响页面首次加载时getType()的第一次运行。我们非常感谢您提供的任何帮助。

修改看起来至少有一个问题与这一行有关：

$('#type').selectpicker('destroy').empty();

如果我删除了destroy方法，那么select将至少显示出来，但它没有填充任何选项。

我将此添加到init函数中，现在它正常工作：

$(document).on('loaded.bs.select', '#type', function(){
    getMenus();
    console.log('getMenus completed');
});
$(document).on('loaded.bs.select', '#and-filter-0', function(){
    getOperators();
    console.log('getMenus completed');
});

我想知道这是否是使这项工作成为最好的方法，和/或如果存在任何其他问题，我只是编写上述解决方案。

Answer 1

你很接近......唯一的原因是因为 $（'#type'）。附加（选项）; 在 getMenus完成后被调用

因此，由于异步性质，选择属性被提前解雇。当你使用提供的API loaded.bs.select' .it给出正确的回电

如果您希望JSfiddle代码正常工作，您可以使用承诺..我使用 async：false 作为临时解决方案。 Check my Fiddle

我所做的只是

request = $.ajax({
      url: '/echo/json/',
      type: 'POST',
      contentType: 'application/json; charset=utf-8',
      async : false,
      dataType: 'json',
      data: {
        json: JSON.stringify(json)

所以结论是 ..使用内置的'loaded.bs.select'事件是最好的解决方案......这里有使用promises的方法但是这将使代码冗长..所以你走在正确的轨道上

动态选择标签显示未定义

1 个答案: