title: Why is it items added in a @Html.DropDownListFor with jQuery do not appear?
body: <p>I am trying to add items in a <code>@Html.DropDownListFor</code> with jQuery but after adding them they don't appear. Looking at the inspector of Chrome to debug code all items are being added, but in page they don't appear. I tried to update the select after to add the items but it still doesn't work.</p>
  <p>How could I fix this?</p>
  <p><strong>HTML</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;cols-sm-10&quot;&gt;
    &lt;label for=&quot;@Html.IdFor(model =&gt; model.cartaoCheckout.ParcelamentoSelecionado)&quot; class=&quot;cols-sm-2 control-label&quot;&gt;Parcelas &lt;img src=&quot;~/Imagens/required.png&quot; height=&quot;6&quot; width=&quot;6&quot;&gt;&lt;/label&gt;
    &lt;div class=&quot;input-group&quot;&gt;
      &lt;div class=&quot;input-group-prepend w-75&quot;&gt;
        &lt;span class=&quot;input-group-text&quot; style=&quot;height:40px;&quot;&gt;&lt;i class=&quot;fa fa-list-ol&quot;&gt;&lt;/i&gt;&lt;/span&gt; @Html.DropDownListFor(model =&gt; model.cartaoCheckout.ParcelamentoSelecionado, Model.cartaoCheckout.Parcelamentos, &quot;-Parcelamento-&quot;, new { Class = &quot;form-control&quot; })
      &lt;/div&gt;
      @Html.ValidationMessageFor(model =&gt; model.cartaoCheckout.ParcelamentoSelecionado, &quot;&quot;, new { @class = &quot;text-danger&quot; })
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>jQuery</strong></p>
  <pre class="lang-js prettyprint-override"><code>var dados = data[&quot;ParcelamentoCartao&quot;];
  var _select = $('#cartaoCheckout_ParcelamentoSelecionado');
  _select.empty();
  
  $.each(dados[&quot;Parcelamentos&quot;], function(i, item) {
    console.log(item.quantity);
    _select.append('&lt;option value=&quot;' + item.quantity + '&quot;&gt;' + item.quantity + '&lt;/option&gt;');
    _select.trigger(&quot;liszt:updated&quot;);
    _select.trigger(&quot;chosen:updated&quot;);
  });
  _select.trigger(&quot;liszt:updated&quot;);
  _select.trigger(&quot;chosen:updated&quot;);
  </code></pre>
  <p>** EDIT - below the Chrome Inspect output**</p>
  <pre><code>    &lt;select class=&quot;form-control&quot; data-val=&quot;true&quot; data-val-number=&quot;The field Parcelamento must be a number.&quot; data-val-required=&quot;Informe o número de parcelas&quot; id=&quot;cartaoCheckout_ParcelamentoSelecionado&quot; name=&quot;cartaoCheckout.ParcelamentoSelecionado&quot; style=&quot;display: none;&quot;&gt;
     &lt;option value=&quot;1&quot;&gt;1&lt;/option&gt;
     &lt;option value=&quot;2&quot;&gt;2&lt;/option&gt;
     &lt;option value=&quot;3&quot;&gt;3&lt;/option&gt;
     &lt;option value=&quot;4&quot;&gt;4&lt;/option&gt;
     &lt;option value=&quot;5&quot;&gt;5&lt;/option&gt;
     &lt;option value=&quot;6&quot;&gt;6&lt;/option&gt;
     &lt;option value=&quot;7&quot;&gt;7&lt;/option&gt;
     &lt;option value=&quot;8&quot;&gt;8&lt;/option&gt;
     &lt;option value=&quot;9&quot;&gt;9&lt;/option&gt;
     &lt;option value=&quot;10&quot;&gt;10&lt;/option&gt;
     &lt;option value=&quot;11&quot;&gt;11&lt;/option&gt;
     &lt;option value=&quot;12&quot;&gt;12&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  <p><strong>Image with select empty even after execute jQuery</strong></p>
  <p><a href="https://i.stack.imgur.com/J5PEx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/J5PEx.png" alt="enter image description here" /></a></p>
  <p><strong>Here the image debugging Chrome's inspector. The select has the options added with jQuery</strong></p>
  <p><a href="https://i.stack.imgur.com/q1b3i.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/q1b3i.png" alt="enter image description here" /></a></p>