Невозможно установить несколько выбранных значений select2 в режиме редактирования - PullRequest
Новая
       51

Невозможно установить несколько выбранных значений select2 в режиме редактирования

1 голос
/ 04 октября 2019

Я пытаюсь загрузить выбранные значения из БД и установить его на select2. Я использую версию select2 4.0.10. Я загружаю данные с помощью ajax и устанавливаю опцию select для элемента select2 после того, как документ готов.

, поэтому я попытался использовать $ ("# area"). val (selectedValues) .trigger ("change«);но, кажется, ничего не выбрано.

вот код моего взгляда. 

<input class="form-control" type="text" id="sourceValues" value="CMS,KDY,RWG">

вот мой элемент select2 

<div class="form-group row">
            <label class="col-md-3" for="area">Area Tagih Kolektor</label>
            <div class="col-md-9">
                <select id="area" class="js-example-basic-multiple form-control" name="area[]" multiple="multiple" required>

                </select>
            </div>
        </div>

и вот мой скрипт дляустановите выбранные значения. 

<script>
    $(document).ready(function(){
        nav_active();
        var selectedValues = ["CMS","KDY","RWG"];
        $('.js-example-basic-multiple').select2({
            placeholder: "Pilih Cabang Area Tagih Collector Agency...",
            multiple: true
        });
        console.log(selectedValues);
        //Date picker
        $('#tgl_berlaku').datepicker({
            autoclose: true
        })
        //Prevent enter to submit
        $(window).keydown(function(event){
            if(event.keyCode == 13) {
                event.preventDefault();
                alertify.error('Untuk melakukan submit form, tekan tombol "Simpan"!');
                return false;
            }
        });
        $.ajax({
            url: "<?php echo base_url();?>ama/c_agency/populate_dropdown_cabang",
            type: 'GET',
            success: function(data) {
                var html = '';
                var j;
                data = JSON.parse(data);
                for(j=0; j<data.length; j++){
                    html += '<option value="'+data[j].GroupBranchID+'">'+data[j].branch+'</option>';
                }
                var posisi = "#area";
                $(posisi).append(html);
            }
        });
        $("#area").val(selectedValues).trigger("change");
    });
    function nav_active(){
        var d = document.getElementById("nav-ama-agency");
        d.className = d.className + "active";
    }
</script>

при запуске сценария ошибки нет.

1 Ответ

0 голосов
/ 04 октября 2019

Вам необходимо изменить способ добавления параметров в поле выбора в обратном вызове ajax success.

Вместо следующего способа добавления параметров. 

                data = JSON.parse(data);
                for(j=0; j<data.length; j++){
                    html += '<option value="'+data[j].GroupBranchID+'">'+data[j].branch+'</option>';
                }

Вам необходимо добавить параметрыиспользуя следующий метод 

            for(j=0; j<data.length; j++){
                var option = new Option(data[j].branch, data[j].GroupBranchID );
                $("#area").append(option);
            }

В документе указывается, что

Новые параметры могут быть добавлены в элемент управления Select2 программным путем путем создания нового объекта Javascript Option и добавления его к элементу управления:

Здесь приведена JS Fiddle , которая добавляет новую опцию в поле выбора при событии щелчка. В вашем случае Click Event запускает вызов AJAX и получает данные удаленно.

...