jquery等待ajax select下拉菜单，然后用$.deferred填充其内容
jquery等待ajax select下拉菜单，然后用$.deferred填充其内容
提问于 2019-06-04 21:10:58
我有两个选择，我需要在第一个填完后再填第二个。因此，实际情况如下所示：
1)将#main_container dropdown设置为2) 2)触发ajax调用，并根据#main_container的值获取子级dropdown的内容(在本例中为2) 3)在窗体上显示子dropdown 2) 3)之后，将child dropdown 2的值设置为400，这样最终结果应为Bag黄色，同时显示Bag Green
main_container的逻辑被放在onchange事件中，它只获取并显示dropdowns。它没有设置它的值。据我所知，我可以在这里使用$.deferred，但我不知道如何在onchange事件之外等待promise。
任何想法都是受欢迎的。谢谢。
$(document).ready(function(){
$('#main_container').val(2);
$('#main_container').trigger('change');// onchange event is triggered, waiting for child_2 dropdown
$('#child_2').val(400);//setting child_2 value here (done immediately)
});
$('#main_container').change(function() {
$('.child').hide();
if($(this).val() == 1){
$('#child_1').show(700); // AJAX call here in real
}else if($(this).val() == 2){
$('#child_2').show(700); // AJAX call here in real
}else{
$('#child_3').show(700); // AJAX call here in real
}
});div {
padding: 5px 10px;
}
div.child {
display: none
}
select {
width: 200px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="option">
<select name="container" id="main_container" data-parent="true" data-parent_id="10">
<option value="">--- Select a container---</option>
<option value="1">Box</option>
<option value="2">Bag</option>
<option value="3">Pallet</option>
</select>
</div>
<div class="child option" id="child_1" style="display:none;">
<select name="box color">
<option value="100">Red</option>
<option value="200">Blue</option>
</select>
</div>
<div class="child option" id="child_2" style="display:none;">
<select name="bag color">
<option value="300">Green</option>
<option value="400">Yellow</option>
</select>
</div>
<div class="child option" id="child_3" style="display:none;">
<select name="pallet color">
<option value="500">Black</option>
<option value="600">Yellow</option>
</select>
</div>
回答 1
Stack Overflow用户
发布于 2019-06-05 17:55:35
我已经更新了代码并找到了解决方案，如下所示：
<!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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56444628
复制相关文章
相似问题
腾讯云开发者
