Ajax를 한 번만 호출하십시오.

Question

4 개의 선택이 있습니다. Javascript를 사용하여 이러한 선택 항목 내에서 표시 할 옵션을 결정합니다. 선택 옵션을 선택하면 변경 이벤트가 트리거되어 추가 선택 옵션이 자동으로 채워집니다. 정확하게 일어나고있는 것을 설명하기가 꽤 어렵 기 때문에 JSFiddle을 설정했습니다. 나는 단지 세 가지 선택을 사용하여 여기에서 약간의 데모를했다.

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 호출이 여러 번 발생합니다. 콘솔에서이를 볼 수 있습니다. 따라서 연도를 선택하면 triggerImageChange가 두 번 호출되기 때문에 바이올린은 두 번의 ajax 호출을 수행합니다. 내가 4 개의 선택을하면 4 개의 아약스가 호출됩니다.

이 문제를 방지 할 수있는 방법이 있습니까?

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

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

그런 다음 #product에 대한 change 핸들러에서 당신이 :

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

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

triggerImageChange 함수는 AJAX의 요청을

주셔서 감사합니다 변경 처리기에서

Answer 1

, 당신이 있습니다. 그리고 함수를 두 번 호출합니다. 따라서 두 번 실행됩니다.

왜 $("#product").trigger("change");이 필요합니까? 그것은 실제로 바뀌지 않았습니다. 그것이 있고, 세 번째 옵션 세트를 채우기 위해 두 번째 AJAX 호출이 필요하다면, 처음에는별로 문제가되지 않습니다.