title: Thymeleaf + Javascript select option change
body: <p>I want to select a list of elements, based on selection I call a function api that give me with a list of data, to insert in a second selection.</p>
  
  <p>The call works fine, I try to alert the result, but I need to change the value of second selection and I fail.
  I'm using <strong>select2</strong>.</p>
  
  <p>This is my <strong>THYMELEAF</strong> page:</p>
  
  <pre><code>   &lt;form id="updateD" data-parsley-validate class="rounded px-2 py-2 mt-3" th:action="@{/ditta/upd}" th:method="POST" th:object="${ditta}"&gt;
  
  &lt;div class="row" th:if="*{codice==null or codice.isEmpty()}"&gt;
                      &lt;div th:replace="~{/tags/input :: inputNorm(indirizzo, *{indirizzo}, text, true, '')}"&gt;&lt;/div&gt;
                      &lt;div th:replace="~{/tags/select :: selectValue(city, *{city}, ${cities}, false)}"&gt;&lt;/div&gt;
                      &lt;div th:replace="~{/tags/select :: selectValue(zip, *{zipCode}, ${zips}, false)}"&gt;&lt;/div&gt;
                  &lt;/div&gt;
  &lt;/form&gt;     
  </code></pre>
  
  <p>JS code:</p>
  
  <pre><code>&lt;script type="text/javascript" th:inline="javascript"&gt;
      /*&lt;![CDATA[*/
          var token = $('#_csrf').attr('content');
          var header = $('#_csrf_header').attr('content');
  
          $(function(){
  
              $('#city').change(function(){
                  handleComune($('#city').val());
              });
  
              $('.sel2').select2({
                  theme: "bootstrap"
              });
          });
  
          function handleComune(city){
              $.ajax({
                  type: 'GET',
                   url:[[ @{'/api/extractZip?city='}]]+city,
                   beforeSend: function(xhr) {
                     xhr.setRequestHeader(header, token);
                 },
                 success : function(data) {
                     $('#zips').val(data);
                     alert(data);
                 }
              });
          }
  
      /*]]&gt;*/
      &lt;/script&gt;
  </code></pre>
  
  <p>Based on the choice of the city I extract a zipcode list.</p>
  
  <p>The <strong>fragments</strong> of the select is the follow:</p>
  
  <pre><code>    &lt;div th:fragment="selectValue(name, selected, values, required)" class="col form-group" th:switch="${required}"&gt;
  
          &lt;label th:text="${required} ? #{${name}}+'*' : #{${name}}" th:for="${name}" class="control-label"&gt;&lt;/label&gt;
  
  &lt;div class="col form-group"&gt;
              &lt;select th:name="${name}" th:id="${name}" class="form-control sel2" th:required="${required}"&gt;
                  &lt;option value=""&gt;&lt;/option&gt;
                  &lt;th:block th:each="v : ${values}"&gt;
                      &lt;option th:value="${v}" th:text="${v}" th:selected="${selected} eq ${v}"&gt;&lt;/option&gt;
                  &lt;/th:block&gt;
              &lt;/select&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p>The  <strong>$('#zips').val(data);</strong>  not change.
  What's wrong? </p>