Ahmad Ahmad - 1 year ago 60
Javascript Question

Data is not appending to Dropdown without page refresh?

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">

and this is my function for appending data options

function Preload7()
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));



without refresh of page whenever i try to call
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,
enter image description here

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

enter image description here

as a result only 3 options is displayed in dropdown
enter image description here

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 ?


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


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

Alternate solution,


hope this helps.