Add item to dropdown dynamically


#1

I am trying to add items dynamically to a dropdown and I just can’t seem to find the correct way of doing it.

Here is the html

<div class="ui search selection dropdown group">
  <input type="hidden" name="gender">
  <i class="dropdown icon"></i>
  <div class="default text">Gender</div>
  <div class="menu">

  </div>
</div>

And I have tried various JS API calls but not sure how to get this to work.

$('.ui.dropdown.group').dropdown();
$('.ui.dropdown.group').dropdown('add optionValue', 'test');
$('.ui.dropdown.group').dropdown('refresh');

Am I supposed to update the html instead or is there an existing API that allows me to add items?


#2

As far as I know there isn’t a built-in behavior to dynamically add options to a dropdown (unfortunately). Frankly I think it should be added. If using a div you need to insert a new div.item into the div.menu and reinitialize the .ui.dropdown. If using a select, add a new option to the hidden select, then reinitialize the .ui.dropdown.

See
http://jsfiddle.net/kmd1970/go4e8uvn/


#3

Thanks for this buddy. It helped me. I really register from this site just to say thank you. Merry Christmas!