chosen:update not working in $.ajax success call

Question

I am going to try to be as clear as possible. My issue is that Chosen isn't updating my dropdown at all. I am not having an issue with it working correctly. The issue is within my $.ajax success call I am pulling data from the database to on an update to repopulate the Chosen dropdown with the previously selected items. My first screen shot shows that the data does come back and populates the dropdown but at the first and second images shows it doesn't do it correctly because of the chosen:update not working correctly, based on what I understand at this point.

I am including the code and the rendered HTML for your review. Any insight and/or assistance that you can provide would be most appreciated.

 --js-- $('#ddlDistributionStates').chosen(); $.ajax... success: function (data) { $(data).each(function (index, item) { var ds = item.DistributionStates.split(","); $.each(ds, function (i, p) { $("#ddlDistributionStates_chosen ul").prepend('<li class="search-choice"><span>' + p + '</span><a class="search-choice-close" data-option-array-index="' + i + '"></a></li>'); }); $("#ddlDistributionStates").trigger("chosen:updated"); } } 

 --HTML-- <div class="row top-buffer"> <div class="col-xs-6"> <div class="input-group"> <span class="input-group-addon">Current States Distribution</span> <select name="DistributionStates" id="ddlDistributionStates" multiple="multiple" class="form-control chosen-select" data-placeholder="Select State(s)"> <option>Alabama </option> <option>Alaska </option> <option>Arizona </option> <option>Arkansas </option> <option>California </option> <option>Colorado </option> <option>Connecticut </option> <option>Delaware </option> </select> </div> </div> </div> --Rendered HTML-- <div class="col-xs-6"> <div class="input-group"> <span class="input-group-addon">Current States Distribution</span> <select name="DistributionStates" id="ddlDistributionStates" multiple="multiple" class="form-control chosen-select" data-placeholder="Select State(s)" style="display: none;"> <option>Alabama </option> <option>Alaska </option> <option>Arizona </option> <option>Arkansas </option> <option>California </option> <option>Colorado </option> <option>Connecticut </option> <option>Delaware </option> </select> <div class="chosen-container chosen-container-multi chosen-with-drop chosen-container-active" style="width: 364px;" title="" id="ddlDistributionStates_chosen"> <ul class="chosen-choices"> <li class="search-choice"><span>Arkansas</span><a class="search-choice-close" data-option-array-index="1"></a></li> <li class="search-choice"><span>Alaska</span><a class="search-choice-close" data-option-array-index="0"></a></li> <li class="search-field"><input type="text" value="Select State(s)" class="default valid" autocomplete="off" style="width: 118px;" aria-invalid="false"></li> </ul> <div class="chosen-drop"> <ul class="chosen-results"><li class="active-result" data-option-array-index="0">Alabama </li> <li class="active-result" data-option-array-index="1">Alaska </li> <li class="active-result" data-option-array-index="2">Arizona </li> <li class="active-result" data-option-array-index="3">Arkansas </li> <li class="active-result" data-option-array-index="4">California </li> <li class="active-result" data-option-array-index="5">Colorado </li> <li class="active-result" data-option-array-index="6">Connecticut </li> <li class="active-result" data-option-array-index="7">Delaware </li> </ul> </div> </div> </div> </div> 

Answer 1

In your code you are trying to append new data to the rendered html.Instead of that append the new options to the select and call $("#ddlDistributionStates").trigger("chosen:updated"); .

Check this sample code.In this code i'm updating the chosen on button click.You can use the same method after the ajax call

 $(function(){ $('#ddlDistributionStates').chosen(); $('#updateSelect').click(function(){ $('#ddlDistributionStates option').remove(); var html =''; for(var i=0; i<= 10;i++){ html += "<option value='"+i+"' selected>"+i+"</option>"; } $('#ddlDistributionStates').append($(html)); $("#ddlDistributionStates").trigger("chosen:updated"); }) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.min.css" rel="stylesheet"/> <button id="updateSelect">Click to update select</button> <div class="row top-buffer"> <div class="col-xs-6"> <div class="input-group"> <span class="input-group-addon">Current States Distribution</span> <select name="DistributionStates" id="ddlDistributionStates" multiple="multiple" class="form-control chosen-select" data-placeholder="Select State(s)"> <option selected>Alabama </option> <option selected>Alaska </option> <option selected>Arizona </option> <option selected>Arkansas </option> <option>California </option> <option>Colorado </option> <option>Connecticut </option> <option>Delaware </option> </select> </div> </div> </div>