title: Getting select2 to refresh data using ajax on dropdown
body: <p>I have the following JavaScript to populate dropdown list using select2 <a href="https://select2.github.io/" rel="nofollow">https://select2.github.io/</a> </p>
  
  <p>It works fine, and populates the list on the first load of the page.
  From then on it does not refresh the list even when data is added because it only does the AJAX call once.  Even if I reload the page, the dropdown list is not refreshed and the AJAX call is not triggered (unless I close and reopen the browser, then the AJAX call is fired)</p>
  
  <p>Is there a way to undertake the ajax call each time the dropdown is opened.  I tried the .on("select2-open") option but didn't have any luck.</p>
  
  <p>Sorry JavaScript is not something I know much about.   </p>
  
  <pre><code>$("#Location").select2({
              placeholder: "Select a known location", // Placeholder text
              allowClear: true, //Allows deselection of chosen address
              ajax: {
                  url: '/AlertInterface/NewAlertLocations', // Where we want the ajax to call
                  dataType: 'json', // The datatype we are expecting to be returned
                  type: "GET", //Just a get method
                  //Data: allows us to pass a parameter to the controller
                  data: function (query) {
                      console.log(query)
                      return { search: query.term }
                  },
                  //processes the results from the JSON method and gives us the select list
                  processResults: function (data) {
                      console.log(data)
                      return {
                          results: JSON.parse(data)
                      };
                  }
              }
          });
  </code></pre>
  
  <p><strong>EDIT:</strong></p>
  
  <p>I did try to use</p>
  
  <pre><code>$("#Location").on("select2:open", function () { $("#Location").select2(); })
  </code></pre>
  
  <p>but that didn't help. :-(</p>