在由 ajax 填充的 select2 中触发更改和选择

Question

我正在使用 ajax 和 processResults 函数填充我的 select2，如这段代码所示，

function PopulateSelect2(sqlclass, ControlID, PlaceHolder) {
$('#' + ControlID).select2({
    placeholder: PlaceHolder,
    allowClear: true,
    theme: "bootstrap",
    ajax: {
        type: "POST",
        url: "../Web_Services/Common/Controllers.asmx/populateCtls",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        //delay: 250,
        data: JSON.stringify({ selector: sqlclass, subselector: '' }),
        processResults: function (data) {
            var parsed = JSON.parse(data.d);
            console.log(parsed)
            return {
                results: parsed
            };
        }
    },
});}

我是这样调用这个函数的，

$(document).ready(function () {
                PopulateSelect2("ddl_occupation", "AddrStateID", "Select")
            });

我试图通过触发更改来设置值，但它不起作用

我尝试了以下方法，

$('#AddrStateID').val(4).trigger('change.select2');

我设法触发了列表内的选择，但没有使用此代码

在select元素控件中显示值

$("#AddrStateID").select2("trigger", "select", {
                    data: { id: "4" }
                })

有没有办法触发选择并在 select 控件中显示结果？

Answer 1

所以我通过 ajax 调用而不是使用 select2 - ajax call

预填充我的 select 控件来解决它

我为每个 select 控件添加了以下属性

parent="" param="" child="" placeholder="" aval=""

其中，

parent:代表父id select或者， param: 表示我用于 ajax 调用的控件的数据参数， child:表示控件的子控件id select或者， placeholder:代表控件的占位符， aval: 表示控件的分配值，以防万一想要填充和 selected，因为我也使用我的表单来存储数据和读取数据。

在下面的示例中，我有 3 个 select 级联控件。

<div class="panel-body">
                    <div class="col-xs-12">
                        <div class="form-grobtn row">
                            <label class="col-sm-2 col-form-label">File Grobtn</label>
                            <div class="col-sm-10">
                                <select id="GpId" style="width: 100%"
                                    class="form-control populate" name="GpId" parent="" param="ddl_btnldgp" child="#CatId"
                                    placeholder="File Grobtn..."
                                    aval="">
                                    <option></option>

                                </select>
                            </div>
                        </div>
                        <div class="form-grobtn row">
                            <label class="col-sm-2 col-form-label">File Category</label>
                            <div class="col-sm-10">
                                <select id="CatId" style="width: 100%"
                                    class="form-control populate" name="CatId" parent="#GpId" param="ddl_btnldcat"
                                    placeholder="Select File Category..."
                                    child="#CatDtlId" aval="">
                                    <option></option>
                                </select>
                            </div>
                        </div>
                        <div class="form-grobtn row">
                            <label for="inputPassword3" class="col-sm-2 col-form-label">File Type</label>
                            <div class="col-sm-10">
                                <select id="CatDtlId" style="width: 100%"
                                    class="form-control populate" parent="#CatId" param="ddl_btnldcatdtl" child=""
                                    placeholder="Select File Type..."
                                    aval="">
                                    <option></option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <button id="btn" class="btn cUpldBtn btn-success" type="button">
                    Assign</button>

并且正在使用此函数填充

  function populateddl(ctl) {
var $this = $(ctl);
var parent, param, child, aval
parent = $this.attr('parent');
placeholder = $this.attr('placeholder');
child = $this.attr('child');
$(child).prop("disabled", true);
param = $this.attr('param');
aval = $this.attr('aval');
if (!parent) {
    $.ajax({
        type: "POST",
        url: "../Web_Services/Common/Controllers.asmx/populateCtls",
        data: JSON.stringify(obj = {
            selector: param,
            subselector: null
        }),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            var jsonData = JSON.parse(data.d);
            $this.html('').append('<option>')
            $(child).prop("disabled", true)
            $this.select2({
                data: jsonData,
                placeholder: $this.attr('PlaceHolder'),
                allowClear: true,
                theme: "bootstrap"
            });
            if (aval) { $this.val(aval).trigger('change'); $this.attr('aval',''); }
        },
    })
}
$this.change(function () {
    if ($this.val() && child) {
        $.ajax({
            type: "POST",
            url: "../Web_Services/Common/Controllers.asmx/populateCtls",
            data: JSON.stringify(obj = {
                selector: $(child).attr('param'),
                subselector: $this.val()
            }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {                
                var jsonData = JSON.parse(data.d);
                $(child).html('').append('<option>')
                $(child).prop("disabled", false)
                $(child).select2({
                    data: jsonData,
                    placeholder: $(child).attr('PlaceHolder'),
                    allowClear: true,
                    theme: "bootstrap"
                });
                if ($(child).attr('aval')) { $(child).val($(child).attr('aval')).trigger('change'); $(child).attr('aval', ''); }
            },
        })
    } else {
        $(child).html('').append('<option>').prop("disabled", true).trigger('change');
    }
})}

使用 function populateddl(ctl)

仅调用父项（包括作为子 select 控件的父项的子项）

在这个例子中我填充如下，

$(document).ready(function () {
        populateddl('#GpId');
        populateddl('#CatId');
    })

为了赋值，我需要填充 select 子控件的值后缀，

$(document).ready(function () {
        $("#btn").click(function () {
            $('#GpId').val(1).attr('aval', '1').trigger('change', 'select2');
            $('#CatId').val(2).attr('aval', '2').trigger('change', 'select2');
            $('#CatDtlId').val(1).attr('aval', '1').trigger('change', 'select2');
            return false;
        })
    })

在由 ajax 填充的 select2 中触发更改和选择

Trigger change and selection in select2 populated by ajax

jquery-select2

jquery-select2-4