jquery 选择2:初始化后如何设置数据?

eqfvzcg8  于 2023-11-17  发布在  jQuery
关注(0)|答案(8)|浏览(98)

我需要在初始化select2后设置一个数据数组。所以我想做这样的事情:

var select = $('#select').select2({});
select.data([
  {id: 1, text: 'value1'},
  {id: 1, text: 'value1'}
]);

字符串
但我得到以下错误:
当附加到元素时,不允许Select2使用选项“data”。
我的HTML:

<select id="select" class="chzn-select"></select>


我应该用什么来代替选择元素?
我需要设置搜索项目的来源

pdsfdshx

pdsfdshx1#

在加载中:

$.each(data, function(index, value) {
  $('#selectId').append(
    '<option value="' + data[index].id + '">' + data[index].value1 + '</option>'
  );
});

字符串

e4yzc0pl

e4yzc0pl2#

创建一个<input type="hidden">元素,并将select2绑定到它。在常规的选择框上使用.select2不会让您随意处理数据,它只是提供了UI和后选择方法。
来源:Select2文档

6rqinv9w

6rqinv9w3#

来源:https://select2.org/programmatic-control/add-select-clear-items
添加项目:

var data = {
    id: 1,
    text: 'Barn owl'
};

var newOption = new Option(data.text, data.id, false, false);
$('#mySelect2').append(newOption).trigger('change');

字符串
清除项目:

$('#mySelect2').val(null).trigger('change');

alen0pnh

alen0pnh4#

对于v4,您必须销毁select2并使用更新的数据重建。

72qzrwbm

72qzrwbm5#

我最近遇到了一个场景,改变一个select 2对象会改变第二个对象的内容(有效地进行父子分组)。我使用了一个appropriate调用来检索一组新的JSON数据,然后由第二个select 2对象拾取。我包含了下面的代码:

$("#group").on('change', function () {
        var uri = "/Url/RetrieveNewResults";
        $.ajax({
            url: uri,
            data: {
                format: 'json',
                Id: $("#group :selected").val()
            },
            type: "POST",
            success: function (data) {
                $("#groupchild").html('');
                $("#groupchild").select2({
                    data: data,
                    theme: 'bootstrap',
                    placeholder: "Select a Type"
                });
            },
            error: function () {
                console.log("Error")
            }
        });
    });

字符串
我发现我必须包含$(“#groupchild”).html(''),以便清除第二个select 2中的前一组数据。希望这能有所帮助。

k4aesqcs

k4aesqcs6#

您可以重新呈现并触发select2
渲染选择2

$('.select2').select2({
  placeholder: 'Slect value',
  allowClear: true
});

字符串
后需要更改数据data

let dataChange = [
  {
    id: 0,
    text: 'enhancement'
  },
  {
    id: 1,
    text: 'bug'
  },
  {
    id: 2,
    text: 'duplicate'
  },
  {
    id: 3,
    text: 'invalid'
  },
  {
    id: 4,
    text: 'wontfix'
  }
];


重新呈现select2

$('.select2').select2('destroy');
$('.select2').empty();
$('.select2').select2({
  placeholder: 'Slect value',
  allowClear: true,
  data: dataChange
});


触发器选择2

$('.select2').trigger('change');


希望这是你的答案:3

c90pui9n

c90pui9n7#

我是这么做的。

1.扩展select 2

Select2.prototype.setAjax = function (ajaxOptions)
                {
                    // Set the new ajax properties
                    var oAjaxOpts = this.options.get('ajax');
                    if (oAjaxOpts != undefined && oAjaxOpts != null)
                    {
                        for (var sKey in ajaxOptions)
                        {
                            oAjaxOpts[sKey] = ajaxOptions[sKey];
                        }
                    }
                    var DataAdapter = this.options.get('dataAdapter');
                    this.dataAdapter = new DataAdapter(this.$element, this.options);
                }

字符串

2.照常初始化(例如-你的可能不同)

jHtmlFrag.select2({
            dropdownParent: $(oData.jDiv),
            placeholder: "Select Option",
            allowClear: true,
            minimumInputLength: 2,
            ajax: {
                url: "",
                method: "POST",
                dataType: 'json',
                delay: 250,
                processResults: function (oResults, params)
                {
                    let page = params.page || 1;
                    // console.log(oResults, (params.page * 10));
                    return {
                        results: oResults.data,
                        pagination: {
                            more: (page * 10) < oResults.recordsFiltered
                        }
                    };
                }
            }
        }).val(null).trigger('change');

3.通过调用新的扩展函数动态设置Ajax选项

jCombo.select2('setAjax', {
            url: sUrl,
            data: function (params)
            {
                let query = {
                    search: params.term,
                    type: params._type,
                    page: params.page || 1,
                }
                return query;
            },
        });

qacovj5a

qacovj5a8#

const changeDataSelect = (selector, data) =>{
  let el = document.querySelector(selector), elClone = el.cloneNode(true);
  el.parentNode.replaceChild(elClone, el);
  $(selector).empty().select2({data})
}

字符串

相关问题