javascript - Html/jQuery - 使用多选 jquery ui 下拉列表但无法正常工作

Question

问题:将选项附加到不同的下拉列表而不是多选下拉列表

我已经给出了所有代码并使用了 multiselect() 函数，但实际上选项是附加到不同的新选择标签而不是 multiselect 下拉列表。

请引用图像以了解它的实际工作情况，这是不正确的。

这里是 Fiddle

HTML

<select id="impact-report-type-filter-input" name="impact-report-type-filter-input" multiple='multiple'>
</select>

Jquery

$(document).ready(function() {
    $("#impact-report-type-filter-input").multiselect({
        noneSelectedText: 'Select Legends',
        minWidth: 165,
        header: "Select Legend(s)",
    });
    getDropDownOptions()
})



 function getDropDownOptions(filterType) {

    $.ajax({
        'async': false,
        'type':'POST',
        'url':"/" + $("#app").val() + "/reports/getDataforChart"
        'success':function(data) {
            console.log(data)
            var xml = data.xml;
            var filterList = data.filterList;
            alert(Object.prototype.toString.call(filterList));

            for(f in filterList){
                $('#impact-report-type-filter-input').append($('<option>', {
                     value: filterList[f],
                     text:  filterList[f]
                }));
            }
            $("#impact-report-type-filter-input").multiselect("rebuild"); 

            /*var html = '';

            for (var i = 0, len = filterList.length; i < len; ++i) {
                html.join('<option value="' + filterList[i]['value'] + '">' + filterList[i]['label'] + '</option>');
            }           

            $('#impact-report-type-filter-input').append(html);*/

            typeFilterChartID.setXMLData(xml) ;
            var dataPieData = document.getElementById("impact-report-type-filter") ;
            typeFilterChart.render(dataPieData);
          }
    });
}

回答:忘记刷新 $("#impact-report-type-filter-input").multiselect("refresh");

Answer 1

只需将 $("#impact-report-type-filter-input").multiselect("rebuild"); 替换为 $("#impact-report-type-filter -input").multiselect("refresh"); 在上面的 jQuery getDropDownOptions(filterType) 函数中。