title: Can't refresh dropdownlist in asp mvc 4 with chosen 0.9.12
body: <p>I have few dropdownlist created by using Html.DropDownListFor like:</p>
  
  <pre><code>&lt;div class="control-group"&gt;
    &lt;label class="control-label" for="inputPropertySurname"&gt;
     City
     &lt;span class="form-required" title="This field is required."&gt;*&lt;/span&gt;
    &lt;/label&gt;
    &lt;div class="controls"&gt;
     @*&lt;input type="text" id="inputPropertySurname"&gt;*@
     @Html.DropDownListFor(m =&gt; m.CityId, vmpa.Cities)
    &lt;/div&gt;
   &lt;!-- /.controls --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>but it always create a div area after selectbox</p>
  
  <pre><code>&lt;div id="CityId_chzn" class="chzn-containerchzn-container-single 
   chzn-container-single-nosearch" style="width: 220px;" title=""&gt;
     &lt;a href="javascript:void(0)" class="chzn-single" tabindex="-1"&gt;
      &lt;span&gt;Hà Nội&lt;/span&gt;
      &lt;div&gt;&lt;b&gt;&lt;/b&gt;&lt;/div&gt;
     &lt;/a&gt;
     &lt;div class="chzn-drop" style="left: -9000px;"&gt;
      &lt;div class="chzn-search"&gt;&lt;input type="text" autocomplete="off"&gt;
      &lt;/div&gt;
      &lt;ul class="chzn-results"&gt;
       &lt;li id="CityId_chzn_o_0" class="active-resultresult-selected" style=""&gt;Hà Nội&lt;/li&gt;
       &lt;li id="CityId_chzn_o_1" class="active-result" style=""&gt;Hồ Chí Minh&lt;/li&gt;
      &lt;/ul&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>i use ajax to get json array and replace new option in json aray to dropdownlist. select box have new option  but it still show old option in div id City_chzn. i try many ways jquery but can't refresh it to show new value.</p>
  
  <p>my ajax</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function () {
  
          $("#CountryId").chosen().change(function () {
              var id = $("#CountryId option:selected").val();
              DDLCountryChange(id);
          });
  
      });
  
      function DDLCountryChange(id) {
          var ddl = $("#CityId");
          ddl.chosen();
          ddl.prop("disabled", true);
          $.ajax({
              url: "/Post/GetCityInfoByCountry/" + id,
              type: "GET",
              dataType: "JSON",
              success: function (result) {
                  ddl.empty();
                  var str = '';
                  $.each(result, function (index, value) {
                      ddl.chosen().append("&lt;option value='" + value['Value'] + "'&gt;" + value['Text'] + "&lt;/option&gt;");
                      ddl.chosen().trigger('listzt:updated');
                  });
  
                  //ddl.prop('disabled', false);
              }
          });
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>UPDATE
  Now i know why my code create a div. because my template using chosen jquery so it is reason why a div created after select. my chosen ver 0.9.12. i'm using </p>
  
  <pre><code>ddl.trigger('listzt:updated');
  </code></pre>
  
  <p>but chosen doesn't update new value to display</p>
  
  <p>UPDATE</p>
  
  <p>I have solved my problem. trigger('liszt:updated') not listzt:updated. All my bad :(</p>