Question

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

运行脚本时没有错误。

Answer 1

您需要更改将选项添加到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事件上向“选择框”添加了“新选项”。对于您而言，Click Event会触发AJAX调用并远程获取数据。

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

1 个答案: