Hi amars,
The options are being added to the <select> element after the chosen object is instantiated. The chosen object has no idea that new options were added, so you have to tell it. You can do that by using .trigger("chosen:updated").
Check this example. Now please take its reference and correct your code.
Refering the below article i have created the example.
View
Customer :
<br />
<select id="ddlCustomers" data-rel="chosen" multiple="" style="width: 350px;" data-placeholder="Please select Customer">
</select>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("[data-rel='chosen']").chosen();
var ddlCustomers = $("[data-rel='chosen']");
$.ajax({
type: "POST",
url: "/Home/BindCustomer",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
$.each(response, function () {
ddlCustomers.append($("<option></option>").val(this['Value']).html(this['Text']));
});
// After updated data from database you need to trigger chosen:updated.
$("[data-rel='chosen']").trigger("chosen:updated");
},
failure: function (response) { alert(response.responseText); },
error: function (response) { alert(response.responseText); }
});
});
</script>
Controller
public ActionResult Index()
{
return View();
}
[HttpPost]
public JsonResult BindCustomer()
{
List<SelectListItem> customers = new List<SelectListItem>();
NorthwindEntities entities = new NorthwindEntities();
for (int i = 0; i < 10; i++)
{
customers.Add(new SelectListItem
{
Value = entities.Customers.ToList()[i].CustomerID,
Text = entities.Customers.ToList()[i].ContactName
});
}
return Json(customers);
}
Screenshot