Add item to dropdown dynamically


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">


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

$('').dropdown('add optionValue', 'test');

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


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 and reinitialize the .ui.dropdown. If using a select, add a new option to the hidden select, then reinitialize the .ui.dropdown.



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