Question

我有4个选择。使用Javascript，我确定在这些选择中显示哪些选项。选择选项后，我还会触发更改事件以自动填充其他选择选项。很难解释究竟发生了什么，所以我设置了JSFiddle。我只使用三个选项进行了一些演示。

＆＃13;

var getSelectedYear = function() {
  return $("#year option:selected").val();
};

var getSelectedProduct = function() {
  return $("#product option:selected").val();
};

$('#year').change(function() {
  $("#year").css('border-color', '#ccc');
  $("#product option").addClass("hide");
  $("#product option.year-" + getSelectedYear()).removeClass('hide');
  $("#product").removeClass('hide');

  var first_val = $("#product option:not('.hide')").first().val();
  $("#product").val(first_val);
  $("#product").trigger("change");
  triggerImageChange();
});

$('#product').change(function() {
  $("#type option").addClass("hide");
  $("#type option.year-" + getSelectedYear() + ".product-" + getSelectedProduct()).removeClass('hide');
  $("#type").removeClass('hide');

  var first_val = $("#type option:not('.hide')").first().val();
  $("#type").val(first_val);
  $("#type").trigger("change");
  triggerImageChange();
});

var triggerImageChange = function() {
  $.ajax({
    type: "get",
    url: "./"
  }).done(function(data){
  });
};

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label>Year</label>
  <select class="form-control" id="year">
    <option value=""></option>
    <option value="2016">2016</option>
  </select>
</div>

<div class="form-group productGroup">
  <label>Product</label>
  <select class="form-control hide" id="product">
    <option value=""></option>
    <option value="Option1" class="year-2016 hide">Option1</option>
    <option value="Option2" class="year-2016 hide">Option2</option>
  </select>
</div>

<div class="form-group productGroup">
  <label>Type</label>
  <select class="form-control hide" id="type">
    <option value=""></option>
    <option value="Option1" class="year-2016 product-Option1 hide">Option1</option>
    <option value="Option2" class="year-2016 product-Option1 hide">Option2</option>
  </select>
</div>

＆＃13;

现在在更改事件中，我也进行了Ajax调用。这是通过

触发的

triggerImageChange();

我已将此功能包含在小提琴中。我的问题是这个。我需要触发更改事件以预先填充其他选择。但是，此事件会导致多次触发ajax调用。您可以在控制台中看到这一点。因此，如果选择年份，小提琴将进行2次ajax调用，因为triggerImageChange被调用两次。当我有4个选择时，它会进行4次ajax调用。

有没有办法阻止这种情况发生？

由于

Answer 1

在你的变更处理程序中，你有这个：

$('#year').change(function() {
    // other code

    $("#product").trigger("change");
    triggerImageChange();
});

然后在change的{{1}}处理程序中，你有：

#product

$('#product').change(function() { // other code $("#type").trigger("change"); triggerImageChange(); });函数发出AJAX请求。然后你调用该函数两次。所以它执行两次。

为什么需要triggerImageChange？它实际上没有改变。如果有，并且您需要第二个AJAX调用来填充第三组选项，那么它首先是一个非问题。

只有一次调用Ajax

1 个答案: