Data is not appending to Dropdown without page refresh?

Question

Hi everyone i am facing a weird problem, i am appending my drop downdata from jquery (fSlect Plugin) Plugin link

it is my select in html

<select name="ownerparm" class="demo" multiple="multiple" id="addownok">
</select>

and this is my function for appending data options

function Preload7()
{
    $("#addownok").find('option').remove();
    console.log("i am called preload7");
    $.getJSON("/FrontEnd/resources/getowner", function (jsonData) {
        $.each(jsonData, function (i, j) {

        $("#addownok").append($("<option value="+j.societyOwnerId+"></option>").html(j.socityOwnersNames));

        }); 
        $('#addownok').fSelect();
    });

}

without refresh of page whenever i try to call Preload7() function data is not appending to drop down, if i remove fSelect plugin then it will work fine(and if i Refresh page then it will append data with fSelect also) i want this without refreshing the page,

as you see when first time i load my application data is properly append in option and in fSelect DOM,

now when i add another owner it cannot append to fSelect DOm

as a result only 3 options is displayed in dropdown

please tell me how to do this witout refreshing page i am waste my 3 days on it but i am not able to do it ?

Answer 1

The plugin has some exposed API functions, such as create, reload, destroy

$('#addownok').fSelect('reload');

should reload the options after changes, but it also duplicates the search box,

Alternate solution,

$('#addownok').fSelect('destroy').fSelect('create');

hope this helps.