Semantic-UI: Bug/Documentation issue: Dynamically setting value for dropdown

For those looking for the same solution (and are noobs like me)

The ‘set selected’ method only works on “.ui.dropdown”, which can only be initialized once. So if you, like me, have thousands of dropdowns in your project…use the following method.

Initialize it once in your global script like this.

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

Then when you want to change the value of a dropdown dynamically, you might have tried this

$('.ui.dropdown').dropdown('set selected','A');

But as you can clearly see, the above will set the values of all dropdowns to A. And not only that, it wont work after page load and can only be run once. So what if you have multiple dropdowns containing similar values but only need to affect one dynamically?

Try this instead.

$('.ui.dropdown').has('the class or id of the dropdown you want to affect').dropdown('set selected','A');

This will ensure only one of them will be affected. We can abstract this concept into a simpler function like below and place it in your global js file.

function changeValue(dropdownID,value){
 $('.ui.dropdown').has(dropdownID).dropdown('set selected',value);
}

And pass info like this to change dropdown values dynamically.

changeValue('#dropdown1','A');

This function can be placed inside an ajax success callback and apply values accordingly.

Here is a fiddle that explains the same thing --> http://jsfiddle.net/0qobkc2x/2/

much simpler http://jsfiddle.net/0qobkc2x/

$('#test').dropdown('set selected','B');

This is a huge pain when you have a framework that changes the value of the hidden input reactively and the select doesn’t update the selected item to the hidden value.

another fix

// inside ur ajax call
setTimeout(function() {
    $('#something').dropdown('set selected', data.length[0]);
}, 1);

$(‘.ui.dropdown’).dropdown(‘set selected’,“value you want to set”);

thanks this is the perfect solution for set the dynamic value in SEMANTIC UI dropdown.

@ujwalbharatn Thank you! I couldn’t find it in the docs, saved my time for sure! 😉

$(‘#dropdown1’).dropdown(‘set selected’,value); is anought!