Add to select and display on screen

Question

I have a select:

<select class="form-control" id="dataInstalacao">
<option value="0/0" selected disabled>Quando podemos instalar?</option>
<option value="6/9">6/9</option>
<option value="7/9">7/9</option>
<option value="8/9">8/9</option>
<option value="9/9">9/9</option>                                                     
</select>

I use the following code to add more options :

var newOption = new Option("teste", data.id, false, false);
$('#dataInstalacao').append(newOption).trigger('change');

What happens is that when I inspect the element, the new option is there, but what is displayed on the screen is a list UL>LI and select has display:noneand that list does not contain the new item.

How shall I proceed?

Answer 1

By the class of <ul> I can see that you are using a library to change the native selects. From what I saw is the Nice Select.

According to the documentation just call the function update for the plugin to update to <ul>.

Then your code would look something like this:

var newOption = new Option("teste", data.id, false, false);
$('#dataInstalacao').append(newOption).niceSelect('update');