I've seen a lot of other questions about using jQuery to dynamically append options to a select box, and I'm follow their instructions but it's still not selecting the option. Here's the HTML:

```
<select id="updated-value-dropdown" class="form-control" style="min-width: 10em;">
</select>

```

And here's the Javascript:

```
$('#edit-modal').on('show.bs.modal', function (e) {
  target_element = $(this).find('#updated-value-dropdown');
  target_element.html(''); // clear options
  var add_options = getOptionsToAdd();
  for (var i = 0; i < add_options.length; i++) {
    target_element.append(new Option(add_options[i], add_options[i], i === 0, i === 0));
  }
}

```

The result is a drop-down box with the correct options, and I can see when I inspect the page that the first option is marked as "selected" in the HTML as it should be, but it still isn't show up as being actually selected when the modal is shown... why isn't this working?

This is what the dropdown looks like on the page (without having clicked it):

[![Without clicking](https://i.stack.imgur.com/MZ2dR.png)](https://i.stack.imgur.com/MZ2dR.png)

This is what the dropdown looks like when I click on it -- as you can see, the first option is "selected" with a check mark next to it, but as you can see in the image above, it's not actually appearing as the value in the actual box (unless I manually click the value):

[![With clicking](https://i.stack.imgur.com/HgvBg.png)](https://i.stack.imgur.com/HgvBg.png)

Also, I'm using bootstrap, I don't know if that has anything to do with it...