Question

在我的项目中，我使用了三个链式选择。

HTML

<select name="id_foo">
  <option value="1">one</option>
  <option value="2">two</option>
</select>
<select name="id_bar">
</select>
<select name="id_doe">
</select> 
<br>
<input type="button" id="auto" value"auto complete">

JS

var $sel_foo = $('select[name="id_foo"]');
var $sel_bar = $('select[name="id_bar"]');
var $sel_doe = $('select[name="id_doe"]');


/** Chained Select (id_foo) */
$sel_foo.on('change', function() {
    var id_foo = this.value;
    $.ajax({
        type    : "POST",
        url     : ajax.php,
        data    : { id_foo: id_foo },
        success : function(data) {
            $sel_bar.html(data);
        }
    });
});

/** Chained Select (id_bar) */
$sel_bar.on('change', function() {
    var id_bar = this.value;
    $.ajax({
        type    : "POST",
        url     : ajax.php,
        data    : { id_bar: id_bar },
        success : function(data) {
            $sel_doe.html(data);
        }
    });
});

为了模拟人类动作我使用触发方法。不幸的是，我必须在触发器方法之间输入超时（2秒）否则选择在完全加载之前被调用（ajax响应）

$('#auto').on('click', function(){
   $sel_foo.trigger("change");
   setTimeout( function() { $sel_bar.trigger("change"); }, 2000);
});

我会尝试更清洁，只有当前一个触发器中的被调用函数完成时才运行下一个触发器。我怎么能这样做？谢谢

修改

我试过了，但没有成功。

 $.when($sel_foo.trigger("change"))
  .then($sel_bar.trigger("change"));

Answer 1

您可以使用以下逻辑：

$sel_foo.on('change', function(e) {
    var id_foo = this.value,
        self = this; // keep ref on `this`
    $.ajax({
        type    : "POST",
        url     : "/echo/html",
        data    : { id_foo: id_foo },
        success : function(data) {
            $sel_bar.html(data);
            if(e.isTrigger) $sel_bar.trigger('change');
        }
    });
});

$('#auto').on('click', function(){
   $sel_foo.trigger("change"); // on click only trigger first SELECT change event
});

其他触发方法完成时，Jquery调用触发器方法

1 个答案: