Unable to reset/update options on jQuery Chosen in rails app

Question

I'm developing a rails 5.1 app. I'm using chosen javascript plugin in my app for making the select-boxes more user friendly.

In one of my viewpage, I have 2 chosen select boxes. one for project and other for tasks. Requirement is to load only the associated tasks on change of project select box.

My View

<div class="form-group pad-right-one">
    <%= f.collection_select :task_project_id_eq, @projects.order(:number), :id, :project_with_number, { include_blank: 'Project' }, {class: 'chosen-select', onchange: "populateTaskFieldWithOptions()"} %>
</div>
<div class="form-group pad-right-one">
    <%= f.collection_select :task_id_eq, @tasks.order(:project_id, :number), :id, :task_with_number, { include_blank: 'Task' }, {class: 'chosen-select'} %>
</div>

Js Code

Ajax call that I'm making is a success and I'm getting all the values.

function populateTaskFieldWithOptions(){
    let projectId = $("#q_task_project_id_eq").val();
    $.ajax({
        type: "POST", 
        url: "/mail/getTasks",
        data: {project: projectId},
        success: 
        function(result){
            console.log("---Ajax Success----"); 
            document.getElementById('q_task_id_eq').selectedIndex = -1;
            var newOption = $('<option value="1">test</option>');
            $('#q_task_id_eq').append(newOption);
            $('#q_task_id_eq').trigger("chosen:updated"); 

           // Other options I tried ... 

           //$('#q_task_id_eq').trigger("liszt:updated");
           //$('#q_task_id_eq').val(' ').trigger('liszt:updated');
           //$('#q_task_id_eq').val(' ').trigger('chosen:updated');


        },
        error: 
        function(jqXHR, textStatus, errorThrown){
            console.log("---Ajax Error----")
            console.error('AJAX Error: ' + textStatus + errorThrown);
        }
      })
    };

I'm not able to reset or update the chosen dropdown.

Any help is really appreciated. Thanks in advance.

Answer 1

 $(".chosen-select").chosen("destroy");