ループでスタックに陥る。 - Select2ドロップダウンリスト

Question

2つのドロップダウンリストがあります。人と企業のためのもの。リストから人を選択すると、データベースに自動的に照会され、その人に関連付けられている適切な対応するビジネスを選択します。ビジネスを選択すると、その企業に関連付けられているすべての人物のデータベースが自動的に照会されます。次に、現在の人のリストをクリアし、関連する人を追加します。

これはすべて素晴らしいです...私がドロップダウンリストを簡単に検索可能にするためにSelect2を使いたいまでは。私は今Select2が.val（）。trigger（ 'change'）メソッドを使用して必要な値を選択するので、無限ループに陥るでしょう。これがトリガされると、クエリーを実行してフィールドを移入する.change関数もトリガされます。

私はこれを修正するために何ができますか？ここで

は私のコードです：自分の前にSelectセレクトを使用した未

$('#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はコールバックに渡されるイベントです。

これは、1つのオプションを選択すると、他の選択肢のオプションを任意に選択するような小さなばかげた例ですが、そのアイデアを得ることができます。お役に立てれば。

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