setting value to dropdown list after getting options with ajax

Question

So i have two different inputs. First one has all the necessary options set by default but the second one has its options set based on what use chooses in the first one.(lets call them "countries" and "cities").

After Country is selected and its cities are loaded i would like to set value of city. I do it like this:

$('#city_id').val(cityVariable)

but it fails to load everytime. I'm almost sure its because DOM is reloaded but i still dont know how to refresh it properly. Long story short i want to be able to select option out of options downloaded with ajax

UPDATE

to make it more clear i will give you pseudo code ofhow it works

$('#country_id').change ->

    ///here goes ajax and the options for city select are called

    /////here DOM should be refreshed so i can use new options

    $('#city_id').val(cityVariable)

Have you checked this discussion - http://stackoverflow.com/questions/496052/jquery-setting-the-selected-value-of-a-select-control-via-its-text-description? What's in your cityVariable? — Ilya Luzyanin, Aug 07 '14 at 09:15
i dont think those two questions are connected. my cityVariable is eq "100" — Leo, Aug 07 '14 at 09:21
Can you make some simple jsfiddle, where you replace your ajax calls with just some dummy data? — Ilya Luzyanin, Aug 07 '14 at 09:22
not really, its not my code and i'd rather not publish any of it:( What information do you lack? — Leo, Aug 07 '14 at 09:33
Ok, I've finally made a demo - http://codepen.io/anon/pen/ybodH. It works ok. Where does your code differ? — Ilya Luzyanin, Aug 07 '14 at 10:11
well the only practical difference is that you use append() to get options and i use ajax(). — Leo, Aug 07 '14 at 10:17
Have you checked your markup after ajax call - is it correct? — Ilya Luzyanin, Aug 07 '14 at 10:22
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/58866/discussion-between-ilya-luzyanin-and-leo). — Ilya Luzyanin, Aug 07 '14 at 10:33

score 1 · Accepted Answer · answered Aug 07 '14 at 10:44

Well, I've made this demo sample, so we could see that it basically works. After discussion with TO, it appeared that he called

$('#city_id').val(cityVariable);

after ajax call, but not inside success callback. Since AJAX is asynchronous by its nature, by the time the above statement was called, there was no content in $('#city_id') select - it was populated inside ajax successful callback. So moving above statement inside callback did the trick.

setting value to dropdown list after getting options with ajax

1 Answers1