无法在编辑模式下设置多个选定值 select2

Question

我正在尝试从数据库加载 selected 值并将其设置在 select2 上。我使用的是 select2 4.0.10 版本。我正在使用 ajax 加载数据，并在文档准备好后将 select 选项设置为 select2 元素。

所以，我尝试使用 $("#area").val(selectedValues).trigger("change");但似乎没有 selected.

这是我的一些代码。

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

这是我设置 selected 值的脚本。

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

输入运行脚本时没有错误。

Answer 1

您需要更改在 ajax 成功回调中将选项附加到 Select 框的方式。

而不是按照附加选项的方式。

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

文档指出

New options can be added to a Select2 control programmatically by creating a new Javascript Option object and appending it to the control:

这里是 JS Fiddle，它将新选项添加到单击事件的 Select 框中。在您的情况下，单击事件会触发 AJAX 调用并远程获取数据。

无法在编辑模式下设置多个选定值 select2

Can't set multiple selected value select2 on edit mode

ajax

codeigniter

jquery-select2

jquery-select2-4