select2 returns 刷新时为空

Question

我在同一页面上有不同的用户，当我点击用户名时它显示了该用户的资格。

当页面加载时，select2 显示 qualification of user1.

当我点击 user2 时，它显示 qualification of user2

但是当我再次点击 user1 时，用户 1 的 select2 为空，无论我做什么，直到我再次刷新页面。

我的数据来自 ajax request。

success: function (data) {

    var qualif = data.qualifs //returns value/1/2/3 single/multiple

    alert(qualif); //always returns some value

    if(qualif.length>0){

        $.each(qualif, function (index, value) {
            $(`.qual_id option[value=${value}]`).attr('selected', true);
        });
    } 

    if(qualif.length<1){
       $("#qual_id option:selected").prop("selected", false);
    }
}



$('#qual_id').select2({
  width: 'resolve',
  placeholder: "QUALIFICATION",
  maximumSelectionLength: 2,

});

查看：

<select name="qual_id[]" id="qual_id"   class="qual_id" multiple="multiple" >
    @foreach(Session::get('qualifs') as $qualif)
        <option value="{{@$qualif->id}}" > {{@$qualif->qual}}</option>
    @endforeach
</select>

what I want is if there is value in qualif variable, which is showing correctly in alert, it should also show up in select2 each time I click, right now it is showing once. and if there's no value in qualif/alert select2 should be empty.

我尝试遵循 Whosebug 的不同答案，但没有任何效果。

我在文件准备好时添加了这个，或者之前发送功能也不起作用。

$('#qual_id').val(null).trigger('change');

完整 JS:

$(document).ready(function($)  {

$('body').on('click','.edit-btn',function(){

            $.ajax({
                type: "GET",
                url: "teachers/" + $(this).attr("value") + "/edit",
                dataType: 'json',

beforeSend: function(){

success: function (data) {

var qualif = data.qualifs //returns value/1/2/3 single/multiple

alert(qualif); //always returns some value

if(qualif.length>0){

$.each(qualif, function (index, value) {
$(`.qual_id option[value=${value}]`).attr('selected', true);
});
} 

if(qualif.length<1){
$("#qual_id option:selected").prop("selected", false);
}
$('#qual_id').select2({
width: 'resolve',
placeholder: "QUALIFICATION",
maximumSelectionLength: 2,
}  });

    });});  });

Answer 1

我不确定你是如何返回数据的，但我已经尝试在下面复制它。要实现类似的结构，您必须具有 PHP 输出，例如 $data[]['value'] 和 $data[]['text']

$(document).ready(function() {
    var qualif = []
    qualif.push({"value": 1, "text": "single"});
    qualif.push({"value": 2, "text": "double"});
    
    // If you need to populate them too.
    /** $.each(qualif, function (index, data) {
      $('#qual_id').append($('<option>', { value: data.value, text: data.text }, '<option/>'));
    });*/
    $('#qual_id').val(qualif.map(a => a.value)).trigger('change');
    

    $('#qual_id').select2({
        width: 'resolve',
        placeholder: "QUALIFICATION",
        maximumSelectionLength: 2,
    });

});

#qual_id {
  width: 200px
}

<select name="qual_id[]" id="qual_id"   class="qual_id" multiple="multiple" >
    <option value="" ></option>
    <option value="1">single</option>
    <option value="2">double</option>
</select>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.js"></script>

select2 returns 刷新时为空

select2 returns null on refresh

ajax

jquery

laravel

jquery-select2