Jquery Chosen Plugin Update Issue After Ajax Call

I'm having an issue with the jquery-chosenplugin not applying to a control that is rebuilt by an ajaxcall. I've looked around at other suggestions but don't seemed to have found a

Solution 1:

$("#fk_level").trigger("chosen:updated"); works if select box is not destroyed and values are changed. If select box is destroyed and recreated, you need to reactivate the plugin for the new select box. So, in your AJAX controlling code, replace

$("#fk_level").trigger("liszt:updated");
$("#fk_level").trigger("chosen:updated");

with

$("#fk_level").chosen({
    width: "200px"
});

Solution 2:

I faced the same issue and I use the below sample example and worked fine with me

$.ajax(
type: 'POST',
url: 'ApiUrl',
dataType: 'json',
async :false,
    success: function(resultList) {
        for (var item in resultList) {
            if (resultList.hasOwnProperty(item)) {
                $("#selectId").append("<option value=" +
                    resultList[item].value +
                    " id=" +
                    resultList[item].value +
                    ">" +
                    resultList[item].text +
                    "</option>");
            }


        }
        $("#selectId").trigger("liszt:updated");
        $("#selectId").trigger("chosen:updated");
    }
});