Shoumen Agdm Shoumen Agdm - 1 month ago 9
Ajax Question

How to push extra chosen option after loading the view page?

Well, I am facing some hardship to add extra option after loading the completely page for a

Chosen
. It's works fine when I am attaching the values prior to the page load. But after page loading completely its can't able to add values to the
chosen
likewise in the image enter image description here
Here, I will select the project and then on the basis of the project the list of assignee are coming from
ajax
calling. But I am not quiet capable to add those assignee to this chosen list.
I have used this type of
javascript
to add the values to the chosen list

$('.chosen-results').append("<li class='active-result' data-option-array-index='10'>Buddy</li>")


It's just add the value in the list but this list can't be selected. When I click on the new added option then it's disappearing and vanishing the option. I badly need a proper solution of this, I am quiet tired of solving this problem. Please Help.

Answer

You need to append option to select element. No need to append li to chosen result. After that use chosen:updated event to re-build chosen.

var selectElem = $("select");

//Append option
selectElem.append($("<option>", {
    value : "new Value",
    text: "Buddy"
});

//Update
selectElem.trigger("chosen:updated");