Ajaxを1回だけ呼び出します。

Question

私は4つの選択肢があります。 Javascriptを使用して、これらの選択項目内に表示するオプションを決定します。選択オプションが選択されている場合は、変更イベントをトリガして、追加の選択オプションを自動入力します。正確に何が起こっているのかを説明するのはかなり難しいので、私はJSFiddleを設定しました。私は3つの選択肢を使ってここで少しデモンストレーションを行っただけです。変更イベント内で今

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){ 
 
    }); 
 
};

<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>

、私はまた、Ajaxの呼び出しを行います。これは、

によって開始されます。

triggerImageChange(); 

私はこの機能をフィディド内に組み込みました。私の問題はこれです。私は、追加の選択肢をあらかじめ準備するためにchangeイベントをトリガする必要があります。ただし、このイベントにより、ajax呼び出しが複数回起動されます。これはコンソールで見ることができます。したがって、yearを選択すると、triggerImageChangeが2回呼び出されているため、フィディングは2つのajax呼び出しを行います。 4つの選択肢があるとき、それは4つのajax呼び出しを行います。

これを防ぐ方法はありますか？

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

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

は、その後、あなたが持っている#productためchangeハンドラで：

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

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

triggerImageChange機能はAJAX要求を行う

おかげで、あなたの変更ハンドラで

Answer 1

は、あなたがこれを持っています。そして、関数を2回呼びます。したがって、2回実行されます。

なぜ$("#product").trigger("change");が必要ですか？それは実際には変更されていません。それがあって、3番目のオプションセットを実装するために2回目のAJAX呼び出しが必要な場合は、最初は問題ではありません。