title: Populate select2 dropdown dynamically
body: <p>I am using select2 version 3.5.4.
  I want to have two select2 dropdowns side by side. When page loads first time one select2 dropdown has data whereas second select2 dropdown is empty. Once user clicks on an entry/option in the first select2 dropdown an ajax call should be made to the server and second select2 dropdown should be populated with ajax response data. I am not being able to achieve it. Whenever i try to populate second dropdown I get errorrs like,</p>
  
  <pre><code>Option 'data' is not allowed for Select2 when attached to a &lt;select&gt; element
  
  Option 'ajax' is not allowed for Select2 when attached to a &lt;select&gt; element    
  </code></pre>
  
  <p>My code is something like,</p>
  
  <p>HTML:-</p>
  
  <pre><code>&lt;div class="form-group"&gt;
                      &lt;label class="col-md-4 control-label" for="folderSelect"&gt;Files &amp; Folders&lt;/label&gt;
                      &lt;div class="col-md-5"&gt;
                          &lt;div class="select2-wrapper"&gt;
                              &lt;select class="form-control select2" id="folderSelect" name="folderSelect"&gt;
                                  &lt;option&gt;&lt;/option&gt;
                                  &lt;option th:each="folder : ${folders}" th:value="${folder}" th:text="${folder}"/&gt;
                              &lt;/select&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;div class="col-md-5"&gt;
                          &lt;div class="select2-wrapper"&gt;
                              &lt;select class="form-control select2" id="fileSelect" name="fileSelect"&gt;
                                  &lt;option&gt;&lt;/option&gt;
                                  &lt;option th:each="file: ${files}" th:value="${file}" th:text="${file}"/&gt;
                              &lt;/select&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:-</p>
  
  <pre><code>$('#folderSelect').on("select2-selecting", function(e) { 
             var value = $(e.currentTarget).find("option:selected").val();
             var data = null;
             $.ajax({url: "test?value=" + value, success: function(result){
               data = result;
               return result;
              }});
  
  
             $("#fileSelect").select2({
                 /* ajax: { // Tried but didn't work
                      dataType: 'json',
                      url: 'test',
                      results: function (data) {
                          return {results: data};
                      }              
                  }*/
                 /*data: function() { //Tried but didn't work
                          $.ajax({url: "test", success: function(data){
                             return data;
                          }});
                  }*/
              });
  
  //Tried but didn't work &lt;br&gt;
                 $("#fileSelect").select2('destroy').empty().select2({data: data});
  
              });
  </code></pre>