Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug/Documentation issue: Dynamically setting value for dropdown #1717

Closed
illuminos opened this issue Jan 26, 2015 · 18 comments

Comments

@illuminos
Copy link

commented Jan 26, 2015

Hi. I could set dropdown values dynamically before by calling

$('.ui.dropdown').dropdown('set value','A').dropdown('destroy').dropdown();

Now this code doesn't seem to work in 1.8.0. Here's my fiddle http://jsfiddle.net/z9furzn6/1/

I couldn't find documentation on this anywhere. Where can I find more information on what can be passed inside modules (other than the ones in the official documentation)? Is the source code the only place to look?

TLDR;
What is the best way to change dropdown values dynamically?

Thanks for your help.

@jlukic

This comment has been minimized.

Copy link
Member

commented Jan 26, 2015

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

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

This comment has been minimized.

Copy link
Author

commented Jan 26, 2015

This only works when the page loads. What if I have values coming from an ajax response and have to set the values of my dropdown accordingly?
Previously I used to destroy and recreate the dropdown to reflect the changes. But it doesn't seem to happen anymore as I keep getting this error : "Dropdown: Once a select has been initialized behaviors must be called on the created ui dropdown".

For example, in the above fiddle you gave me, I am unable to do set the value to A without page reloading (via js console).

How can I achieve that?

@jlukic

This comment has been minimized.

Copy link
Member

commented Jan 26, 2015

You dont have to do any of that.

@jlukic

This comment has been minimized.

Copy link
Member

commented Jan 26, 2015

#1669
http://jsfiddle.net/8vy6f91g/

Please search for issues before posting new threads.

@jlukic jlukic closed this Jan 26, 2015

@jlukic jlukic added the Duplicate label Jan 26, 2015

@illuminos

This comment has been minimized.

Copy link
Author

commented Jan 27, 2015

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/

@michtill

This comment has been minimized.

Copy link

commented Jul 11, 2015

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

@steve-ross

This comment has been minimized.

Copy link

commented Nov 13, 2015

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.

@utsavig

This comment has been minimized.

Copy link

commented Jan 18, 2016

Thank you very much ujwalbharatn. You saved my day 👍

@BrianJLennon

This comment has been minimized.

Copy link

commented Feb 2, 2016

Great post ujwalbharatn! Thank you very much.

I could not get this to work doing it as the semantic docs recommend and your solution saved me some heartache...when I eventually found it!

For the record this is the code I used in case it helps anyone else...

var priceType = this.priceType;
$('.ui.dropdown').has('#priceType').dropdown('set selected', priceType);

Thank you again!

@cariquitanmac

This comment has been minimized.

Copy link

commented Feb 11, 2016

@ujwalbharatn Thanks for this.
I also encountered issue when clearing a dropdown. I set dropdown value after onchange of another dropdown. I guess the state of the dropdown was changed.

If i use this syntax $('#' + targetDropdown).dropdown('set selected', value); it will not display the placeholder after clearing it.

@cherrylipstick

This comment has been minimized.

Copy link

commented Feb 19, 2016

@ujwalbharatn Thank you! I couldn't find it in the docs, saved my time for sure! ;)

@ctf0

This comment has been minimized.

Copy link

commented Jun 6, 2016

another fix

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

This comment has been minimized.

Copy link

commented Feb 24, 2017

I had a similar problem. I discovered how to fix it and reported it in this issue.

@awaistechverx

This comment has been minimized.

Copy link

commented Jul 3, 2017

i am using this with angular $('#test').dropdown('set selected','B');
and getting error $apply already in progress
this is my code.
angular.element(document.querySelector('select#sortBy')).dropdown('set selected','Desc');
any one can help?

@seajean

This comment has been minimized.

Copy link

commented Jun 14, 2018

('set selected', null) not works. How to select none?

@prudho

This comment has been minimized.

Copy link

commented Jun 14, 2018

@seajean $('#test').dropdown('clear'); ?

@seajean

This comment has been minimized.

Copy link

commented Jun 14, 2018

@prudho It works, thx! Why semantic has no docs~

@ColinFrick

This comment has been minimized.

Copy link

commented Jun 14, 2018

@seajean It has, but it takes a while to navigate it: https://semantic-ui.com/modules/dropdown.html#behavior

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
You can’t perform that action at this time.