Data is not added to Dropdown without refreshing the page?

Question

Hi everyone, I have a strange problem, I add my drop downdata from jquery (fSlect Plugin) Plugin Link

this is my choice in html

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

and this is my function to add data parameters

 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 refreshing the page whenever I try to call Preload7() , these functions are not added to the dropdown, if I remove the fSelect plugin, then it will work fine (and if I refresh the page, then it will add data using fSelect) I want this without refreshing the page,

as you see, the first time I load my application data, it is correctly added to the options and in fSelect DOM,

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

as a result, only 3 options are displayed in the drop-down list

please tell me how to make this witout an update page, I spend my 3 days on it, but I can’t do it?

Answer 1

There are some public API functions in the plugin, such as create , reload , destroy

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

you should reload the parameters after the changes, but also duplicates the search box,

Alternative solution

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

hope this helps.