Semantic-UI: [Dropdown] 'set selected' does not recognize dynamically added items?

I had the same problema as achimkoellner. The “set selected” didn’t work after dynamically fill a select element. I tried the “refresh” before the “set selected” method but still didn’t work. The only solution was to use a setTimeout to call “set selected” async.

for (var id in championships) { var $option = $(“<option value="” + id + “">” + championships[id].name + “</option>”); $select.append($option); } $select.dropdown(‘refresh’); if (defaultValueId) setTimeout(function () { $select.dropdown(‘set selected’, defaultValueId); }, 1);

Mutation observers (which refresh the selector cache) are asynchronous event callbacks which must wait for the browser to fire mutation events. If you need to use a value immediately you will manually have to call

$('.ui.dropdown').dropdown('refresh');

http://jsfiddle.net/51489p1k/

The refresh-method doesn’t seem to work if the source element was a select element:

http://jsfiddle.net/nfsfb87y/1/

Couldn’t find any documentation on set selected. If I use a timeout after I append options to the select box it works.

I think the request method sould maybe return a promise such as

$("[name=productIds]").dropdown("refresh").then(function() {
    $("[name=productIds]").dropdown("set selected", "3"); 
});

I looked at the refreshSelectors method #4486 and to me it looks like a select element wouldn’t be refreshed, is that possible?

seems like an undocumented feature

I want to prepopulate the value when form is loading and also to give the option to the user to select the option from given list which is coming remotely using apiSetting parameters.

$(‘.remote.ui.dropdown’).dropdown({ apiSettings: { url: ‘/api/call’ }, filterRemoteData: true });

$('.remote.ui.dropdown').dropdown('refresh');
$('.remote.ui.dropdown').dropdown('set selected',2);

I am also facing same issue as if I am using remote content in dropdown list dynamically in that case

$(‘.remote.ui.dropdown’).dropdown({ apiSettings: { url: ‘/api/call’ }, filterRemoteData: true });

$(‘.remote.ui.dropdown’).dropdown(‘refresh’); $(‘.remote.ui.dropdown’).dropdown(‘set selected’,“value”);

is not working

Please help me to understand what I am doing wrong

This would be good to document, it’s one of the many “gotchas” I’ve found when attempting to use semantic UI with angularjs.

+1 @sarbona Isn’t this a bug?