How to create a drop-down menu with html <select> in jquery and populate it with the response (a list) of the ajax call?

Question

My code first :-

function getSchools(selectedReport){
             $("<select id = 'schools'  onChange = 'createReport(this)'></select>").insertAfter("#myList")
             $.ajax({
                 type:'GET',
                 url:'http://localhost:8080/getSchoolList',
                 xhrFields: {
                     withCredentials:true
                 },

                 success:function(response){
                    var dropdown = $("schools");
                    dropdown.empty();
                    $.each(response, function(index,value){
                        $('schools').append(value.schoolName);
                    })
                 },
                 error:function(response){
                    console.log("Don't care about this for now");
                }
}

What I want is to fetch schoolName from all the maps in response (which is a list of maps), and add them to the drop-down list with id = 'schools'. What should I do differently?

Answer 1

Try this, Here schoolId is assumed please add your respected obj/element

$.each(response, function(index,value){
       $('#schools').append('<option value="'+value.schoolId+'">'+value.schoolName+'</option>');
});