Not able to populate multiselect dropdown

Question

I am trying to dynamically populate the options of a multiselect dropdown. Below is my code:

<label for="serviceTypeCntrl" style="padding-left: 14px;">Service Type : </label>
<select id="serviceTypeCntrl" name="serviceTypeCntrl" class="selectpicker" multiple="multiple">
</select>

Then I am trying to populate the dropdown dynamically using ajax call.

$(document).ready(function () {         
    $.ajax({            
        url : 'ServicerServlet?identifier=PopulateServiceType',
        type : 'post',
        dataType: 'json',
        success : function(responseText) {
            alert(responseText);
            //var option="";
            $("#serviceTypeCntrl").find("option").remove();
            responseText.forEach(function(serviceType) {
            //option = $('<option>' + serviceType + '</option>');
            //$('#serviceTypeCntrl').append(option);
            //$('<option>').text(serviceType).appendTo('#serviceTypeCntrl');
            $('#serviceTypeCntrl').append($('<option>').text(serviceType)); 
            })
        }        
   });
});

Value is coming from the servlet but the dropdown is not getting populated. What am I doing wrong here? Looking forward to your answers.

Thanks in advance.

Answer 1

Try once like this

$('#serviceTypeCntrl').append("<option>" + serviceType + "</option>"));

instead of this

$('#serviceTypeCntrl').append($('<option>').text(serviceType));