Add to select and display on screen

Question

Add to select and display on screen

Navigation

#1 by (3 votes)

0

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 UL>LI list and the select has display:none and this list does not contain the new item

How do I proceed?

html jquery twitter-bootstrap

asked by anonymous 05.09.2018 / 15:14

1 answer

LIKE with COUNT in PHP What is the usefulness of pipe () and map () functions in Angular 6?

score 3 · Accepted Answer

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

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

So your code would look something like this:

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