루프에서 멈추다가 .change - Select2 드롭 다운 목록

Question

두 개의 드롭 다운 목록이 있습니다. 하나는 사람들을위한 것이고 다른 하나는 기업을위한 것입니다. 목록에서 사람을 선택하면 데이터베이스에 자동으로 쿼리 한 다음 해당 사람과 관련된 올바른 해당 업무를 선택합니다. 비즈니스를 선택하면 해당 회사와 관련된 모든 사람들을 데이터베이스에 자동으로 쿼리합니다. 그런 다음 현재 사용자 목록을 지우고 연관된 사람들을 추가합니다.

이것은 모두 훌륭한 작품입니다 ... Select2를 사용하여 목록을 쉽게 검색 할 수있게 만들 때까지는. 이제 Select2가 .val(). trigger ('change') 메서드를 사용하여 원하는 값을 선택하기 때문에 무한 루프에 빠지게됩니다. 트리거되면 쿼리를 실행하고 필드를 채우는 .change 함수도 트리거합니다.

이 문제를 해결하려면 어떻게해야합니까?

자신하기 전에 선택 2를 사용하는 데하지

$('#personNameField').select2(); 
$('#businessNameField').select2(); 

/* When a business is selected it then pulls all the associated customers and puts them into the customer name drop down list */ 
$("#businessNameField").change(function getAssociatedPeople() { 
    var sitePath = sitepath.sitePath; 
    var business_id = $("#businessNameField").val(); 
    if (business_id == 'Choose a Company') { 
     $('#personNameField').val('Choose a Person').trigger('change'); 
    } 
    else { 
     /* Location of the query script that pulls info from the database */ 
     var url = myticketsscript.pluginsUrl + '/portal/public/includes/shortcodes/my-tickets/auto-complete/auto-complete.php'; 
      $.get(url, { business_id: business_id, sitePath: sitePath }) 
      .done(function(data) { 
       $('#personNameField').html('<option value="Choose a Person">Choose a Person</option>'); 
       var results = jQuery.parseJSON(data); 
       console.log(data); 
       $(results).each(function(key, value) { 

        /* Add the data to the customer name drop down list */ 

        $('#personNameField').append('<option id="customer_id" value="'+ value.id +'">' + value.first_name + ' ' + value.last_name + '</option>'); 

        /* Logs the data in the console */ 
        console.log(key); 
        console.log(value); 
       }) 
      }); 
    } 
}); 
/* When a person is selected it then pulls all the associated business and puts it into the business name drop down list */ 
$("#personNameField").change(function() { 
    var customer_id = $("#personNameField").val(); 
    var sitePath = sitepath.sitePath; 
    if (customer_id == 'Choose a Person') { 
     var url = myticketsscript.pluginsUrl + '/portal/public/includes/shortcodes/my-tickets/auto-complete/auto-complete.php'; 
     $.get(url, { customer_list: customer_id, sitePath: sitePath }) 
     .done(function(data) { 
      $('#businessNameField').val('Choose a Company').trigger('change'); 
      $('#personNameField').html('<option value="Choose a Person">Choose a Person</option>'); 
      var results = jQuery.parseJSON(data); 
      console.log(data); 
      $(results).each(function(key, value) { 

       /* Add the data to the customer name drop down list */ 
       $('#personNameField').append('<option id="customer_id" value="'+ value.id +'">' + value.first_name + ' ' + value.last_name + '</option>'); 

       /* Logs the data in the console */ 
       console.log(key); 
       console.log(value); 
      }) 
     }); 
    } 
    else { 
     /* Location of the query script that pulls info from the database */ 
     var url = myticketsscript.pluginsUrl + '/portal/public/includes/shortcodes/my-tickets/auto-complete/auto-complete.php'; 
      $.get(url, { customer_id: customer_id, sitePath: sitePath }) 
      .done(function(data) { 
       var results = jQuery.parseJSON(data); 
       console.log(data); 
       $(results).each(function(key, value) { 

        /* Selects the correct company for the customer selected */ 

        $('#businessNameField').val(value.id).trigger('change'); 

        console.log(key); 
        console.log(value); 
       }) 
      }); 
    } 
}); 

Answer 1

, 나는 그 문서에보고하고 자신의 이벤트의 일부가 발견 :

여기 내 코드입니다. 난 그냥 아래의이 작은 예에 그것을 시도

$("#businessNameField").on("select2:select", function() {...}); 
$("#personNameField").on("select2:select", function() {...}); 

:

https://select2.github.io/examples.html#programmatic-control

그래서보다는 change에 선택기 바인딩, 아마 당신은 뭔가를 시도하려는. change을 사용하면 무한 루프가 발생하지만 적절한 이벤트를 사용하면 반복되지 않습니다.

각 선택 옵션의 값과 텍스트를 얻기 위해 중첩 된 개체를 탐색했습니다. e.params.data.id 및 e.params.data.text입니다. 여기서 e은 콜백에 전달 된 이벤트입니다.

하나의 옵션을 선택하면 다른 선택에서 옵션을 임의로 선택하는 다소 어리석은 예제이지만 생각을하게됩니다. 희망이 도움이됩니다.

<!DOCTYPE html> 
<html> 
<head> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" /> 
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     var firstSelect = $(".js-example-basic-single1") 
     firstSelect.select2(); 

     var secondSelect = $(".js-example-basic-single2") 
     secondSelect.select2(); 

     firstSelect.on("select2:select", function (e) { 
      var value = e.params.data.id; 
      var text = e.params.data.text; 
      console.log("firstSelect selected value: " + value); 

      if (value === "AL") { 
       secondSelect.val("MA").trigger("change"); 
      } 
      else if (value === "WY") { 
       secondSelect.val("CA").trigger("change"); 
      } 
     }); 

     secondSelect.on("select2:select", function (e) { 
      var value = e.params.data.id; 
      var text = e.params.data.text; 
      console.log("secondSelect selected value: " + value); 

      if (value === "MA") { 
       secondSelect.val("AL").trigger("change"); 
      } 
      else if (value === "CA") { 
       secondSelect.val("WY").trigger("change"); 
      } 
     }); 
    }); 
</script> 
</head> 
<body> 
<select class="js-example-basic-single1"> 
    <option value="Default">Default</option> 
    <option value="AL">Alabama</option> 
    <option value="WY">Wyoming</option> 
</select> 
<select class="js-example-basic-single2"> 
    <option value="Default">Default</option> 
    <option value="MA">Massachusetts</option> 
    <option value="CA">California</option> 
</select> 
</body> 
</html>