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

【问题标题】：Updating the jquery-chosen selection list without reloading the page在不重新加载页面的情况下更新 jquery-chosen 选择列表
【发布时间】：2021-08-23 15:34:10
【问题描述】：

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

我的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");

不起作用。或者我没有正确传递参数。

【问题讨论】：

标签： jquery-chosen

【解决方案1】：

From the docs:

动态更新选择

如果您需要更新选择字段中的选项并希望 Chosen 获取更改，则需要在该字段上触发“chosen:updated”事件。 Chosen 将根据更新的内容重新构建自己。

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

工作sn-p：

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

【讨论】：

非常感谢

【解决方案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");
}

【讨论】：