Html/jQuery - Used multi-select jquery ui dropdown but not working proprely

Question

Issue: Appending options to different dropdown instead of multiselect dropdown

I have given all code and used multiselect() function but actully option are appending to different new select tag instead of multiselect drop down.

please refer image for actual working of it which is not correct.

Here is 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);
          }
    });
}

Answer: Forgot to refresh $("#impact-report-type-filter-input").multiselect("refresh");

yes if i havent then dropdown also will not come. am I correct? — user4408375
Can you please add your code to jsfiddle so i can review it. Thanks — Ankit vadariya
i tried but its throwing error multiselect is not function after including js n css too — user4408375

Unknown Unknown · Accepted Answer · 2016-02-22T11:42:25

Just replace $("#impact-report-type-filter-input").multiselect("rebuild"); to $("#impact-report-type-filter-input").multiselect("refresh"); in above jQuery getDropDownOptions(filterType) function.

Html/jQuery - Used multi-select jquery ui dropdown but not working proprely

1 Answers