javascript - 无法填充多选下拉列表

Question

我正在尝试动态填充多选下拉列表的选项。下面是我的代码：

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

然后我尝试使用 ajax 调用动态填充下拉列表。

$(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)); 
            })
        }        
   });
});

值来自 servlet，但未填充下拉列表。我在这里做错了什么？期待您的回答。

提前致谢。

Answer 1

像这样尝试一次

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

而不是这个

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