jquery 更新select2数据而不重新生成控件

dly7yett  于 2022-12-18  发布在  jQuery
关注(0)|答案(9)|浏览(244)

我将<input type="hidden">转换为select2下拉列表,并通过query方法向其提供数据

$('#inputhidden').select2({
    query: function( query ) {
        query.callback( data ); // the data is in the format select2 expects and all works well..
    );
});

问题是我需要破解select2 UI,并在搜索栏顶部放置两个按钮,当单击这些按钮时,将执行 AJAX 调用,并必须更新select2内容。

现在,我需要在不完全重建select2的情况下进行这些更新,而只是刷新下拉列表中的项目。我找不到一种方法来将一组新数据传递给一个已经创建的select2控件,这可能吗?

wgx48brx

wgx48brx1#

选择2版本3.x

如果你有带选项的本地数组(通过 AJAX 调用接收),我认为你应该使用data参数作为返回选择框结果的函数:

var pills = [{id:0, text: "red"}, {id:1, text: "blue"}]; 

$('#selectpill').select2({
    placeholder: "Select a pill",
    data: function() { return {results: pills}; }
});

$('#uppercase').click(function() {
    $.each(pills, function(idx, val) {
        pills[idx].text = val.text.toUpperCase();
    });
});
$('#newresults').click(function() {
    pills = [{id:0, text: "white"}, {id:1, text: "black"}];
});

小提琴:* 一个月一次 *

如果您使用按钮自定义select 2接口,只需在更新数据数组(示例中为pills)后调用updateResults(此方法不允许从select 2对象的外部调用,但如果需要,您可以将其添加到select 2中的allowedMethods数组)方法。

选择2版本4:定制数据适配器

自定义数据适配器与额外的updateOptions(不清楚为什么原始ArrayAdapter缺乏此功能)方法可用于动态更新选项列表(本例中的所有选项):

$.fn.select2.amd.define('select2/data/customAdapter',
    ['select2/data/array', 'select2/utils'],
    function (ArrayAdapter, Utils) {
        function CustomDataAdapter ($element, options) {
            CustomDataAdapter.__super__.constructor.call(this, $element, options);
        }
        Utils.Extend(CustomDataAdapter, ArrayAdapter);
        CustomDataAdapter.prototype.updateOptions = function (data) {
            this.$element.find('option').remove(); // remove all options
            this.addOptions(this.convertToOptions(data));
        }        
        return CustomDataAdapter;
    }
);

var customAdapter = $.fn.select2.amd.require('select2/data/customAdapter');

var sel = $('select').select2({
    dataAdapter: customAdapter,
    data: pills
});

$('#uppercase').click(function() {
    $.each(pills, function(idx, val) {
        pills[idx].text = val.text.toUpperCase();
    });
    sel.data('select2').dataAdapter.updateOptions(pills);
});

小提琴:* 一个月一次 *

选择2版本4: AJAX 传输函数

在v4中,您可以定义可以使用本地数据数组自定义传输方法(例如thx @Caleb_Kiage,我使用过它,但没有成功)
文件:https://select2.github.io/options.html#can-an-ajax-plugin-other-than-jqueryajax-be-used
Select 2使用 AJAX .transport中定义的传输方法向您的API发送请求。默认情况下,此传输方法为jQuery.ajax,但可以更改。

$('select').select2({
    ajax: {
        transport: function(params, success, failure) {
            var items = pills;
            // fitering if params.data.q available
            if (params.data && params.data.q) {
                items = items.filter(function(item) {
                    return new RegExp(params.data.q).test(item.text);
                });
            }
            var promise = new Promise(function(resolve, reject) {
                resolve({results: items});
            });
            promise.then(success);
            promise.catch(failure);
        }
    }
});

但是使用此方法,如果数组中的选项文本更改,则需要更改选项的ID-内部select 2 dom选项元素列表未修改。如果数组中的选项ID保持不变-将显示以前保存的选项,而不是从数组更新!如果仅通过向其添加新项来修改数组,则没有问题-对于大多数常见情况,可以。
*小提琴:**https://jsfiddle.net/xu48n36c/3/ *

pgpifvop

pgpifvop2#

我想直接把资料交上去就够了:

$("#inputhidden").select2("data", data, true);

注意,第二个参数似乎指示需要刷新。
感谢@Bergi的帮助。
如果它不能自动更新,你可以尝试直接调用它的updateResults方法。

$("#inputhidden").select2("updateResults");

或者通过向“input.select2-input”发送一个触发器来间接触发它,如下所示:

var search = $("#inputhidden input.select2-input");
search.trigger("input");

vlju58qv

vlju58qv3#

将Select 2 4.0与Meteor配合使用,您可以执行以下操作:

Template.TemplateName.rendered = ->

  $("#select2-el").select2({
    data  : Session.get("select2Data")
  })

  @autorun ->

    # Clear the existing list options. 
    $("#select2-el").select2().empty()

    # Re-create with new options.
    $("#select2-el").select2({
      data  : Session.get("select2Data")
    })

发生了什么:
1.呈现模板时...
1.使用会话中的数据初始化select 2控件。
1.@autorun(this.autorun)函数在每次Session.get(“select 2Data”)的值改变时运行。
1.每当会话更改时,请清除现有的select 2选项,然后使用新数据重新创建。
这适用于任何React式数据源--例如Collection.find().fetch()--而不仅仅是Session.get()。
注意:从Select 2 4.0版开始,您必须先移除现有选项才能添加新选项。请参阅此GitHub问题了解详细信息。没有方法可以在不清除现有选项的情况下“更新选项”。
以上是coffeescript,与Javascript非常相似。

2exbekwf

2exbekwf4#

试试这个:

var data = [{id: 1, text: 'First'}, {id: 2, text: 'Second'}, {...}];
$('select[name="my_select"]').empty().select2({
    data: data
});
yqyhoc1h

yqyhoc1h5#

var selBoxObj = $('#selectpill');
selBoxObj.trigger("change.select2");
ars1skjm

ars1skjm6#

我通过使用 AJAX 选项并指定一个自定义传输函数解决了这个问题。
下面是相关的js让它工作。

var $items = [];

let options = {
ajax: {
    transport: function(params, success, failure) {
    let items = $items;

    if (params.data && params.data.q) {
        items = items.filter(function(item) {
        return new RegExp(params.data.q).test(item.text);
        });
    }

    let promise = new Promise(function(resolve, reject) {
        resolve({
        results: items
        });
    });

    promise.then(success);
    promise.catch(failure);
    }
},
placeholder: 'Select item'
};

$('select').select2(options);

let count = $items.length + 1;

$('button').on('click', function() {
$items.push({
    id: count,
    text: 'Item' + count
});
count++;
});
hgqdbh6s

hgqdbh6s7#

据我所知,如果不刷新整个列表或输入一些搜索文本并使用查询函数,就不可能更新select2选项。
这些按钮是用来做什么的?如果它们是用来确定选择选项的,为什么不把它们放在选择框之外,让它们以编程的方式设置选择框数据,然后打开它呢?我不明白为什么要把它们放在搜索框的顶部。如果用户不应该搜索,你可以使用minimumResultsForSearch选项来隐藏搜索功能。

编辑:这个怎么样...
超文本标记语言

<input type="hidden" id="select2" class="select" />

Javascript语言

var data = [{id: 0, text: "Zero"}],
    select = $('#select2');

select.select2({
  query: function(query) {
    query.callback({results: data});
  },
  width: '150px'
});

console.log('Opening select2...');
select.select2('open');

setTimeout(function() {
  console.log('Updating data...');
  data = [{id: 1, text: 'One'}];
}, 1500);

setTimeout(function() {
  console.log('Fake keyup-change...');
  select.data().select2.search.trigger('keyup-change');
}, 3000);

示例Plunker
**编辑2:**这至少会让它更新列表,但是如果您在触发keyup-change事件之前输入了搜索文本,仍然会有一些奇怪的地方。

yizd12fk

yizd12fk8#

适用于选择2 4.X

var instance = $('#select2Container').data('select2');
var searchVal = instance.dropdown.$search.val();
instance.trigger('query', {term:searchVal});
4ioopgfo

4ioopgfo9#

Diego对answer given by SpinyMan的评论很重要,因为empty()方法将删除select2示例,因此任何自定义选项都将不再保留。如果您想保留现有的select2选项,则必须保存它们,销毁现有的select2示例,然后重新初始化。您可以这样做:

const options = JSON.parse(JSON.stringify(
  $('#inputhidden').data('select2').options.options
));
options.data = data;

$('#inputhidden').empty().select2('destroy').select2(options);

我建议总是显式地传递select2选项,因为上面只复制简单的选项,而不是任何定制的回调或适配器,还要注意这需要select2的最新稳定版本(在本文发表时是4.0.13)。
我编写了泛型函数来处理这个问题,其中包含一些特性:

  • 可以处理返回多个示例的选择器
  • 使用select2现有的示例选项(默认)或传入一组新选项
  • 保留任何仍然有效的已选值(默认值),或将其完全清除
function select2UpdateOptions(
  selector,
  data,
  newOptions = null,
  keepExistingSelected = true
) {
  // loop through all instances of the matching selector and update each instance
  $(selector).each(function() {
    select2InstanceUpdateOptions($(this), data, newOptions, keepExistingSelected);
  });
}

// update an existing select2 instance with new data options
function select2InstanceUpdateOptions(
  instance,
  data,
  newOptions = null,
  keepSelected = true
) {
  // make sure this instance has select2 initialized
  // @link https://select2.org/programmatic-control/methods#checking-if-the-plugin-is-initialized
  if (!instance.hasClass('select2-hidden-accessible')) {
    return;
  }

  // get the currently selected options
  const existingSelected = instance.val();

  // by default use the existing options of the select2 instance unless overridden
  // this will not copy over any callbacks or custom adapters however
  const options = (newOptions)
    ? newOptions
    : JSON.parse(JSON.stringify(instance.data('select2').options.options))
  ;

  // set the new data options that will be used
  options.data = data;
      
  // empty the select and destroy the existing select2 instance
  // then re-initialize the select2 instance with the given options and data
  instance.empty().select2('destroy').select2(options);
      
  // by default keep options that were already selected;
  // any that are now invalid will automatically be cleared
  if (keepSelected) {
    instance.val(existingSelected).trigger('change');
  }
}

相关问题