Select2:初始化后如何设置数据?

Posted

技术标签:

【中文标题】Select2:初始化后如何设置数据?【英文标题】:Select2: how to set data after init? 【发布时间】:2013-03-05 11:09:21 【问题描述】:

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

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

但我收到以下错误:

当附加到元素时,Select2 不允许使用选项“数据”。;

我的 html

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

我应该使用什么来代替选择元素?

我需要设置搜索项目的来源

【问题讨论】:

你想做什么? data 用于设置选定选项(我也不确定您的语法是否正确),Select2 select 只能有一个选定元素,因此您使用.select2('val', optionValue)。如果您需要多个选定项目,请在隐藏输入上调用 .select2() 或使用 multiple 属性进行选择。如果要设置搜索项目的来源,那是另一回事。指定您要执行的操作。 我需要为我的 select2 小部件设置一个新的数据数组。如果错误,可能是 .data()。 我正在寻找类似于 setData 方法的东西。 您的意思是选项列表?只需更新select 中的选项,select2 实例就会自动检索这些选项。 我需要设置搜索项目的来源。 【参考方案1】:

在加载中:

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

【讨论】:

我个人更喜欢$('#selectId').append( $.map(data, function(v, i) return $('&lt;option&gt;', val: i, text: v ); ) );,但无论哪种方式都可以。 您的解决方案的缺点是数据的编程设置被破坏。任何想法如何解决这一问题?顺便说一句 +1 你的解决方案。【参考方案2】:

创建一个 &lt;input type="hidden"&gt; 元素并将 select2 绑定到该元素。在常规选择框上使用 .select2 不会让您使用数据,它只是主要为您提供 UI 和后选择方法。

来源: Select2 Documentation

【讨论】:

【参考方案3】:

来源: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');

【讨论】:

我相信这会清除 SELECTED 项,而不是列表中的实际数据? 最佳答案!感谢您的帮助!【参考方案4】:

对于 v4,您必须使用更新的数据销毁和重建 select2。检查https://github.com/select2/select2/issues/2830

【讨论】:

【参考方案5】:

我最近遇到了这样一种情况,即更改一个 select2 对象会改变第二个对象的内容(有效地进行父子分组)。我使用 ajax 调用来检索一组新的 Json 数据,然后由第二个 select2 对象获取。我已包含以下代码:

 $("#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('') 才能清除第二个 select2 中的前一组数据。希望这会有所帮助。

【讨论】:

【参考方案6】:

可以重新渲染并触发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

【讨论】:

【参考方案7】:

这就是我所做的。

1。扩展选择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。通过调用新的扩展 func 来动态设置 Ajax 选项

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

【讨论】:

以上是关于Select2:初始化后如何设置数据?的主要内容,如果未能解决你的问题,请参考以下文章

如何在初始化了select2的输入框上设置默认值?

AngularJS + select2 - 如何设置初始值

使用 Ajax 源设置 select2 元素初始值的简单示例?

初始化后向 Select2 添加选项

Knockout Select2 按对象设置初始值

设置 Angular-UI Select2 多个指令的初始值