select2 возвращает ноль при обновлении - PullRequest
Новая
       43

select2 возвращает ноль при обновлении

0 голосов
/ 09 ноября 2019

У меня на одной странице разные пользователи, когда я нажимаю на имя пользователя, оно показывает квалификацию этого пользователя.

при загрузке страницы select2 показывает qualification из user1.

когда я нажимаю на user2, он показывает qualification из user2

, но снова, когда я нажимаю user1, я получаю пустой select2 для user1, что бы я ни делал, пока не обновлю страницу снова.

Мои данные поступают из 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,

});

view: 

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

Что мне нужно, если есть значениев переменной qualif, которая правильно отображается в предупреждении, она также должна отображаться в select2 каждый раз, когда я нажимаю, сейчас она отображается один раз. и если нет никакого значения в qualif / alert, select2 должен быть пустым.

Я пытался следовать другим ответам из StackOverflow, но ничего не получалось.

я добавил это, когда документ готов или перед отправкойЭта функция также не работает. 

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

Complete 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,
}  });

    });});  });

1 Ответ

1 голос
/ 10 ноября 2019

Я не уверен, как вы возвращаете данные, но я попытался воспроизвести их ниже. Чтобы получить похожую структуру, вы должны иметь 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>
...