在不重新加载页面的情况下更新 jquery-chosen 选择列表

Question

下午好。我尝试在不重新加载页面的情况下传递值，但是 select 参数的功能停止工作

我的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>

我的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;
}

如果我尝试只替换元素分解的代码

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;      
}

在文档中，我没有找到如何重新加载元素本身。请帮忙

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

无效。或者我没有正确传递参数。

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.

请注意它说 select 字段中的选项 - 所以您需要直接修改 <option>s，而不是生成的结果。

工作片段：

// 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>

Answer 2

非常感谢 - 它有效，但我需要替换它，而不是添加它。（也许我没有正确设置 aopros）我按照你的例子这样做了，对我有用。

function selectMultipleBilder(arr) {
    $('#question_multiple_chosen').html('');
    var select = $('#question_multiple_chosen'),
        newOptions = '';
    arr.forEach(function(item) {
        newOptions += '<option value=' + item.id + '>' + item.question + '</option>';
    })
    select.append(newOptions);
    $("#question_multiple_chosen").trigger("chosen:updated");
}

在不重新加载页面的情况下更新 jquery-chosen 选择列表

Updating the jquery-chosen selection list without reloading the page

jquery-chosen