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

Posted 2023-05-07

【中文标题】无法在编辑模式下设置多个选定值 select2

【英文标题】：Can't set multiple selected value select2 on edit mode

【发布时间】：2020-02-02 13:06:46

【问题描述】：

我正在尝试从 db 加载选定的值并将其设置在 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】：

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

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

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

文件表明

可以通过创建新的 javascript Option 对象并将其附加到控件以编程方式将新选项添加​​到 Select2 控件：

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