Semantic interface: dynamically added item to the drop-down list cannot be selected

Question

I am trying to dynamically add items to a drop-down list, but when items are added, they cannot be selected. Here is what I have done so far:

HTML:

<select name="tags" multiple="" class="ui fluid dropdown"> <option value="" >Enter some tags</option> <option value="css">css</option> <option value="html">html</option> </select> 

JS:

 $dropdown = $('.ui.dropdown'); $dropdown.dropdown({ maxSelections: 3 }); $dropdown.dropdown('add optionValue', 'ruby'); $dropdown.dropdown('add optionValue', 'python'); $dropdown.dropdown('set selected', ['css', 'html', 'python', 'ruby']); 

css and html are selected, but ruby and python not displayed, and ruby and python are added to the drop-down list, and you can select them manually. You can find jsfiddle in here .

I also saw the following question: Dynamic deployment of semantics-UI , but I do not think that this is a good way to add items to drop-down lists.