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

问题描述 投票:0回答:1

我正在尝试从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>

运行脚本时没有错误。

ajax codeigniter jquery-select2 jquery-select2-4
1个回答
0
投票
之后,将select选项设置为select2元素

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

而不是遵循以下方式来添加选项。

                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调用并远程获取数据。

© www.soinside.com 2019 - 2024. All rights reserved.