Select item in combobox which is populated per AJAX request

Question

I have the following JavaScript/jQuery problem:

Combobox is populated on the client side by calling a web service
Select an item in the combobox after it is populated

I can't post the entire code, but tried to snip out the interesting parts:

HTML:

<select name="RegionId">
</select>

JavaScript:

$(function () {
     $.getJSON('/hotels/GetRegionsByCountry/1', function (data) {
         var items = [];
         $.each(data, function (index) {
             items.push('<option value="' + this.Id + '">' + this.Name + '</option>');
         });
         $("[name='RegionId']").html(items.join(''));
     });
     $("[name='RegionId']").val("24");
});

Problem: After the combobox is populated (1) the selection fails (2).

It seems to me that jQuery can't access the items that were populated. But why?

Dont you have to use `data[index]` instead of `this`? Maybe I'm wrong. — agastalver, Jan 29 '14 at 13:09
That part of the code works fine. The last line (.val) does not work. — Krisztián Balla, Jan 29 '14 at 13:11
@AdolAurion in the context of `$.each()`, `this` refers to the particular item in the iteration, which is in fact `data[index]`, so either way should work. — Mike C, Jan 29 '14 at 13:16
Yep, as `$("[name='RegionId']").val();` WON'T give you the selected option, I think that you can't force the selected line this way neither. Have you tried to manually set the selected option with something like `var selected = //the option that have the ID "24"; selected.prop("selected");` The goal is to manually add the selected property to that line. As you are building the combobox from scratch, you don't have to check for other selected lines this time. — TCHdvlp, Jan 29 '14 at 13:17

score 2 · Accepted Answer · answered Jan 29 '14 at 13:08

2

Assigning a value to the input field is carried out before it was filled (request has not yet completed). Try this:

$(function () {
     $.getJSON('/hotels/GetRegionsByCountry/1', function (data) {
         var items = [];
         $.each(data, function (index) {
             items.push('<option value="' + this.Id + '">' + this.Name + '</option>');
         });
         $("[name='RegionId']").html(items.join(''));
         $("[name='RegionId']").val("24");
     });   
});

answered Jan 29 '14 at 13:08

Goodnickoff

2,267
1
15
14

Oh, I see. Thank you. But the selection can't be within the event handler. It must happen after the values are loaded into the combobox. – Krisztián Balla Jan 29 '14 at 13:10
Make sure that the drop-down list contains a – Goodnickoff Jan 29 '14 at 13:22
Thank you for finding the problem. I solved it using a synchronous AJAX request, because I didn't want to duplicate the code: http://stackoverflow.com/questions/933713/is-there-a-version-of-getjson-that-doesnt-use-a-call-back (look for Jonathan's answer using ajaxSetup) – Krisztián Balla Jan 30 '14 at 06:50

score 0 · Answer 2 · answered Jan 29 '14 at 13:10

Try to do this like that :

$(function () {
     $.getJSON('/hotels/GetRegionsByCountry/1', function (data) {
         var select = $("[name='RegionId']");
         $.each(data, function (index) {
             select.append('<option value="' + this.Id + '">' + this.Name + '</option>');
         });
         $("[name='RegionId']").val("24");
     });

});

Select item in combobox which is populated per AJAX request

2 Answers2