0

I am trying to add items in a @Html.DropDownListFor 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.

How could I fix this?

HTML

<div class="cols-sm-10">
  <label for="@Html.IdFor(model => model.cartaoCheckout.ParcelamentoSelecionado)" class="cols-sm-2 control-label">Parcelas <img src="~/Imagens/required.png" height="6" width="6"></label>
  <div class="input-group">
    <div class="input-group-prepend w-75">
      <span class="input-group-text" style="height:40px;"><i class="fa fa-list-ol"></i></span> @Html.DropDownListFor(model => model.cartaoCheckout.ParcelamentoSelecionado, Model.cartaoCheckout.Parcelamentos, "-Parcelamento-", new { Class = "form-control" })
    </div>
    @Html.ValidationMessageFor(model => model.cartaoCheckout.ParcelamentoSelecionado, "", new { @class = "text-danger" })
  </div>
</div>

jQuery

var dados = data["ParcelamentoCartao"];
var _select = $('#cartaoCheckout_ParcelamentoSelecionado');
_select.empty();

$.each(dados["Parcelamentos"], function(i, item) {
  console.log(item.quantity);
  _select.append('<option value="' + item.quantity + '">' + item.quantity + '</option>');
  _select.trigger("liszt:updated");
  _select.trigger("chosen:updated");
});
_select.trigger("liszt:updated");
_select.trigger("chosen:updated");

** EDIT - below the Chrome Inspect output**

    <select class="form-control" data-val="true" data-val-number="The field Parcelamento must be a number." data-val-required="Informe o número de parcelas" id="cartaoCheckout_ParcelamentoSelecionado" name="cartaoCheckout.ParcelamentoSelecionado" style="display: none;">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
   <option value="5">5</option>
   <option value="6">6</option>
   <option value="7">7</option>
   <option value="8">8</option>
   <option value="9">9</option>
   <option value="10">10</option>
   <option value="11">11</option>
   <option value="12">12</option>
</select>

Image with select empty even after execute jQuery

enter image description here

Here the image debugging Chrome's inspector. The select has the options added with jQuery

enter image description here

FernandoPaiva
  • 4,410
  • 13
  • 59
  • 118
  • Your screenshot of the "select" doesn't look like a `select` - are you converting it / wrapping it (eg using chosen/select2)? – freedomn-m Feb 24 '21 at 18:02
  • Looks like you're doing *something* `_select.trigger("chosen:updated");` ? Please include exactly what plugins you're using *and* which versions (`liszt:updated` was apparently removed ~10 years ago....) Related: https://stackoverflow.com/questions/11365212/how-do-i-reset-a-jquery-chosen-select-option-with-jquery/11365340#11365340 – freedomn-m Feb 24 '21 at 18:04
  • 2
    Please show code as text, not as a picture of text. In Chrome, you can right-click an element and select Copy > Copy outerHTML to get the element as text. I note that the element you have highlighted here has `style="display: none;"`, which tells me that, as @freedomn-m has intuited, that `select` is not what is getting displayed. – Heretic Monkey Feb 24 '21 at 18:28
  • @HereticMonkey I have already edit adding the outerHtml of chrome – FernandoPaiva Feb 24 '21 at 19:30
  • @freedomn-m nope, it is just a `@Html.DropDownListFor` . I ain't use any plugin, just jquery and razor – FernandoPaiva Feb 24 '21 at 19:32
  • Then what's this code for? `_select.trigger("chosen:updated");` – freedomn-m Feb 24 '21 at 20:37
  • 1
    Also, look *closely* at your own pasted html - right at the end `style="display: none;"` - confirms: your *actual* `select` is being hidden and replaced by another control - as obvious on the UI, but incase you need more proof: right click the control and do `inspect element` - it will go to a `div` that appears *next to* your `select` - that's not an error. – freedomn-m Feb 24 '21 at 20:38
  • @freedomn-m just was test. But now, I think that the problem is with jquery because I tried to use `empty()` to clean the select and it doesn't works – FernandoPaiva Feb 24 '21 at 21:39
  • Your next step is to provide a [mcve] that **demonstrates the problem** as, if we take your code as-is it will clearly work (as you're expecting it to, hence your question) – freedomn-m Feb 24 '21 at 22:57
  • Here's your code (with a `data` object implied that you didn't provide). You *say* `display:none` was just a test, so that's removed. You *say* you don't have any plugins (despite `chosen:updated` and `class=form-control` showing otherwise, perhaps they are just "tests" as well - maybe provide *actual* code, so we don't have to guess what's a test and what isn't) so those are commented. Trying to help you, but you're not making it easy. – freedomn-m Feb 24 '21 at 23:09

0 Answers0