CODEWITHSUNDEEP
jqueryajax
Santhosh Raju
Santhosh Raju

Reputation: 21

jQuery: Iterating a ajax response list and populating and it in dropdown list

JSON response from servlet as

empID: rajuM, givenName: Raju M, empID: rajuM01, givenName: Raju M R

I want to iterate this list and populate it in the drop down list . I have tried my best to do it but no luck please help. Please look at the code below.

$('#select').change(function(){
    var dept = $('select[name="select-dept"] option:selected').text();
    console.log(dept);
    $.ajax({
        type: "GET",
        url: "updateEmployeeServlet",
        data: {dept: dept},
        success: function(list){
        $('#employee-list').html("Please select Employee under Department:      <select name = \"employee\"></select>");

            $.each(list, function(index, data){
                $('#employee-list select').html("<option value = "+data.empID+">"+data.givenName+"</option>");
            });
        },
        error: function(){
            alert("something went wrong");
        }
    });
});

Upvotes: 1

Views: 13004

Answers (2)

Amritpal singh
Amritpal singh

Reputation: 865

You can do it like this :

First you need data object like : [{'empID': 'rajuM', 'givenName': 'Raju M'}, {'empID': 'rajuM01', 'givenName': 'Raju M R'}]

success: function(list)
{
  $('#employee-list').html("Please select Employee under Department:<select name =\"employee\"></select>");
  var options = "";
  for(i in list)
  {
     options += "<option value = "+list[i].empID+">"+list[i].givenName+"</option>"; 
  }
  $('#employee-list select').append(options);
}

Here is the fiddle.

Upvotes: 2

jgreenberg
jgreenberg

Reputation: 478

I think you just want append instead of html 

$('#employee-list select').append("<option value = "+data.empID+">"+data.givenName+"</option>");

Upvotes: 1

Related Questions