jquery等待ajax选择下拉列表，然后用$.deferred填充其内容_Jquery

jquery等待ajax选择下拉列表，然后用$.deferred填充其内容

jquery

jquery等待ajax选择下拉列表，然后用$.deferred填充其内容,jquery,Jquery,我有两个选择，我需要在第一个被填写后填写第二个。因此，实际情况如下所示： 1）将#主容器下拉列表设置为2 2）激发ajax调用并根据#main_container的值获取子下拉列表的内容（在本例中为2） 3）在窗体上显示子下拉列表2 3）在所有这些之后，将child下拉列表的值设置为400，这样最终结果应该是Bag Yellow，而它显示的是Bag Green 问题是，我的代码没有等待ajax调用完成并显示子下拉列表2，它正在尝试立即设置子下拉列表2，而我只需要在ajax调用完成并且表单

我有两个选择，我需要在第一个被填写后填写第二个。因此，实际情况如下所示：

1）将

#主容器

下拉列表设置为2 2）激发

ajax

调用并根据

#main_container

的值获取子下拉列表的内容（在本例中为2） 3）在窗体上显示子下拉列表2 3）在所有这些之后，将

child下拉列表的值设置为400，这样最终结果应该是Bag Yellow，而它显示的是Bag Green
问题是，我的代码没有等待ajax调用完成并显示子下拉列表
2，它正在尝试立即设置子下拉列表
2，而我只需要在ajax调用完成并且表单上显示子下拉列表
2后设置它。main\u container
的逻辑放在onchange
事件中，它只获取并显示下拉列表。它没有设置它的值。据我所知，我可以在这里使用$.deferred
，但我不知道如何在onchange
事件之外等待promise

任何想法都欢迎。多谢各位
考虑以下简化代码：

$（文档）.ready（函数（）{
$（'主容器'）.val（2）；
$（'main_container'）.trigger（'change'）；//一旦触发更改事件，等待child_2下拉列表
$（'#child_2'）.val（400）；//在此处设置child_2值（立即完成）
});
$（“#主容器”）.change（函数（）{
$（'.child'）.hide（）；
if（$（this）.val（）==1）{
$（'#child_1'）.show（700）//这里的AJAX调用为real
}else if（$（this）.val（）==2）{
$（'#child_2'）.show（700）//这里的AJAX调用为real
}否则{
$（'#child_3'）.show（700）//这里的AJAX调用为real
}
});
div{
填充物：5px10px；
}
分区儿童{
显示：无
}
挑选{
宽度：200px；
}

---选择一个容器---
盒子
纸袋
托盘
红色
蓝色
绿色
黄色的
黑色
黄色的
我已经更新了代码并找到了解决方案，请参见以下内容：
    <!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <style type="text/css">

        div {
            padding: 5px 10px;
        }

        div.child {
            display: none
        }

        select {
            width: 200px;
        }

    </style>
    <div id="main_div">
        <div class="option">
            <select name="container" id="main_container">
                <option value="">--- Select a container---</option>
                <option value="1">Box</option>
                <option value="2">Bag</option>
                <option value="3">Pallet</option>
            </select>
        </div>
    </div>



    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">

        var child_2_div = '<div class="child option" id="child_2" style="display:block;">'+
                                '<select name="bag color" id="child_2_select">'+
                                    '<option value="300">Green</option>'+
                                    '<option value="400">Yellow</option>'+
                                '</select>'+
                            '</div>'; 
        var timerId, dfd;

        function appender(){

            console.log('appender called');

            $('#main_div').append(child_2_div);
            clearInterval(timerId);
            dfd.resolve();
            console.log('logging dfd1');
            console.log(dfd);
        }
        $(document).ready(function(){
            $('#main_container').val(2);
            $('#main_container').trigger('change');// onchange event is triggered, waiting for child_2 dropdown
            $.when(dfd).then(function(){
                console.log('logging dfd2');
                console.log(dfd);
                $('#child_2_select').val(400);
            }); //setting child_2 value here (done immediately)
        });

        $('#main_container').change(function() {

            $('.child').hide(); 
            $('#child_2').remove();

            if($(this).val() == 2){
                dfd = $.Deferred();
                timerId = setInterval(appender, 1000);

            }else{
                $('#child_3').show(700); // AJAX call here in real
            }
        });



    </script>

</body>
</html>


div{
填充物：5px10px；
}
分区儿童{
显示：无
}
挑选{
宽度：200px；
}
---选择一个容器---
盒子
纸袋
托盘
变量child_2_div=''+
''+
“绿色”+
“黄色”+
''+
''; 
var-timerId，dfd；
函数appender（）{
log（'appender called'）；
$（'main_div'）。追加（child_2_div）；
清除间隔（timerId）；
解析（）；
log（'logging dfd1'）；
控制台日志（dfd）；
}
$（文档）.ready（函数（）{
$（'主容器'）.val（2）；
$（'main_container'）.trigger（'change'）；//一旦触发更改事件，等待child_2下拉列表
$.when（dfd）.then（function（）{
log（'logging dfd2'）；
控制台日志（dfd）；
$（'child_2_select'）.val（400）；
})；//在此处设置child_2值（立即完成）
});
$（“#主容器”）.change（函数（）{
$（'.child'）.hide（）；
$（'#child_2'）。删除（）；
if（$（this）.val（）==2）{
dfd=$.Deferred（）；
timerId=setInterval（appender，1000）；
}否则{
$（'#child_3'）.show（700）//这里的AJAX调用为real
}
});
如果你有一个实际的ajax调用，你可以把你想在之后运行的代码放在success
函数中，或者放在then（）
函数中。我不能把代码放在success
函数之后，ajax只是从服务器上得到下拉列表，它的实际值是在代码的其他多个部分设置的。你知道如何在$（'document'）.ready（）
部分使用then（）
吗？如果你的代码中有注释//ajax调用的地方没有使用ajax，那么在哪里使用ajax一点也不清楚。。。请出示一些代码，说明你真正的问题是什么。除非你有承诺，否则使用then
是没有意义的。这里我有所有child
下拉列表，用html简化，在实际代码中，我通过ajax调用接收它们，这是延迟执行的。在显示第二个下拉列表以说明延迟的作用时，我在这里放置了700毫秒的延迟。结果实际上应该是袋黄色，而它显示我袋绿色