gafasmill gafasmill - 2 months ago 5
jQuery Question

Javascript improving ajax call for populating select

I am using this code to get some data and populate a select dropdown.

url: 'myurl here',
method: 'GET',
success: function(result) {
$.each(result.main, function(result, value) {

What I need to do after populating the select is to get the value of the 1st line populated in the select.

How can I do this?


To do this you can set the val() of the select to the first item in the array. Try this:

success: function(result) {
    var html = '';
    $.each(result.main, function(result, value) {
        html += '<option value="' + + '">' + + '</option>'

Working example

Alternatively if you want to force the selection to the first option within the select you can set the selectedIndex property to 0:

$('#myselect').append(html).prop('selectedIndex', 0);

Also note that I amended the loop to generate a single HTML string which is only appended to the DOM once, which is quicker than amending the DOM on each iteration.

I want to get the value of the first one and store it in a variable so I can use it later

In that case you can use result.main[0].id:

var first = result.main[0].id