Updating the jquery-chosen selection list without reloading the page

Question

Good afternoon. I try to pass the values without reloading the page, but the ability to select parameters stops working

My html

<div id="qd__">
    <div id="qd_" class="non d-block">
        <label class="pt-3 pb-1" for="">Вопросы</label><br>
        <select name="" id="question_multiple_chosen" data-placeholder="Список выбранных вопросов" class="chosen-select col-md-12" multiple="" tabindex="">
            @foreach($questions as $question)
                <option value="{{$question->id}}">{{$question->question}}</option>
            @endforeach
        </select>
    </div>
</div>

My js

function selectMultipleBilder(arr) {
    htmlSelect = '<ul class = \"chosen-results\">';
    arr.forEach(function(item) {
        htmlSelect += '<li class=\"active-result\" data-option-array-index=\"' + item.id + '\">' + item.question + '</li>';
    });
    htmlSelect += '</ul>';
    document.getElementById('question_multiple_chosen_chosen').children[1].innerHTML = htmlSelect;
}

If I try to just replace the code the element breaks up

function selectMultipleBilder(arr) {
    htmlSelect = '<label class="pt-3 pb-1" for="">Вопросы</label><br><select name="" id="question_multiple_chosen" data-placeholder="Список выбранных вопросов" class="chosen-select col-md-12" multiple="" tabindex="">';
    arr.forEach(function(item) {
        htmlSelect += '<option value="' + item.id + '">' + item.question + '</option>';
    });
    htmlSelect += '</select>';
    document.getElementById('qd_').innerHTML = htmlSelect;      
}

In the documentation, I did not find how to reload the element itself. Help please.

$("#question_multiple_chosen").trigger("chosen:updated"); 

Does not work. Or I'm not passing the parameters correctly.

Answer 1

From the docs:

Updating Chosen Dynamically

If you need to update the options in your select field and want Chosen to pick up the changes, you'll need to trigger the "chosen:updated" event on the field. Chosen will re-build itself based on the updated content.

Note it says the options in your select field - so you need to modify the <option>s directly, not the generated results.

Working snippet:

// Cache our select
var $select = $('#question_multiple_chosen');

// Init chosen
$select.chosen();

// Update on link click
$('a').on('click', function(e) {
    e.preventDefault();
    selectMultipleBilder(arr);
});

// Some dummy data to add to the select
var arr = [
    {id: 4, question: "Option 4"},
    {id: 5, question: "Option 5"},
    {id: 6, question: "Option 6"},
];

// Update the select
function selectMultipleBilder(arr) {
    var newOptions = '';

    // Updating the DOM is expensive, don't do it every iteration.
    // Instead build up a string and modify DOM just once.
    arr.forEach(function(item) {
        newOptions += '<option value=' + item.id + '>' + item.question + '</option>';
    });

    // To append to existing options
    // $select.append(newOptions);

    // To replace existing options
    $select.html(newOptions);

    // Let chosen know we've updated the select
    $select.trigger("chosen:updated");
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<select name="" id="question_multiple_chosen" class="chosen-select" multiple="" tabindex="">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

<p><a href="#">Click to update</a></p>