Question

我有一个远程获取数据的Select2，但我还想以编程方式设置其值。尝试以编程方式更改它时，它会更新select的值，而Select2会注意到更改，但它不会更新其标签。

$('#set-email-manually').click(function(e) {

    e.preventDefault();

    // THIS DOESN'T WORK PROPERLY!?

    $('#user-email-address') // Select2 select box
        .empty()
        .append('<option selected value="test@test.com">test@test.com</option>');
    $('#user-email-address').trigger('change');

});

我尝试过很多不同的事情，但我无法理解。我怀疑这可能是一个错误，所以在项目上有filed an issue。

Answer 1

阅读文档我认为您可能以错误的方式设置选项，您可以使用

data, {}

而不是

{
  option1: value1,
  option2: value2
}

并将{}中包含的选项设置为＆＃34;，＆＃34;像这样：

$('#user-email-address').select2('data', {
  id: 'test@test.com',
  label: 'test@test.com'
});

所以我更改了这部分代码：

$('#user-email-address').select2({'data': {
    id: 'test@test.com',
    label: 'test@test.com'
  }
});

为：

        processResults: function(data, params) {
            var payload = {
                results: $.map(data, function(item) {
                  return { id: item.email, text: item.email }; 
                })
            };
            return payload;
        }

并且标签现在正在更新。

updated fiddle

希望它有所帮助。

编辑：

我纠正自己，似乎你可以按照数据的方式传递数据{}

问题在于数据模板..

再次阅读文档似乎数据模板应该是{id，text}而你的ajax结果是{id，email}，设置手册部分不起作用，因为它试图从{的对象返回电子邮件id，text}没有电子邮件。因此您需要更改格式选择功能以返回文本，而不是仅发送电子邮件或重新映射ajax结果。

我更喜欢重新映射ajax结果并采用标准方式，因为这会使您的占位符也能正常工作，因为占位符模板似乎也是{id，text}。

所以我更改了这部分代码：

    templateResult: function(result) {
        return result.email;
    },
    templateSelection: function(selection) {
        return selection.email;
    }

并删除了这些，因为它们不再需要了：

@PersistenceContext(unitName = "myPersistenceUnit3")
private EntityManager em;

更新小提琴：updated fiddle

Answer 2

对我来说，没有AJAX的工作方式如下：

var select = $('.user-email-address');
var option = $('<option></option>').
     attr('selected', true).
     text(event.target.value).
     val(event.target.id);
/* insert the option (which is already 'selected'!) into the select */
option.appendTo(select);
/* Let select2 do whatever it likes with this */
select.trigger('change');

Answer 3

Kevin-Brown on GitHub replied并说：

问题是如果未指定电子邮件，您的模板方法不会回退到文本。传入的数据对象应该包含＆lt; option＆gt;的文本。文本属性中的标记。

事实证明，这两种方法的结果参数包含的数据多于AJAX响应！

templateResult: function(result) {
    console.log('templateResult', result);
    return result.email || result.text;
},
templateSelection: function(selection) {
    console.log('templateSelection', selection);
    return selection.email || selection.id;
},

这是功能齐全的updated fiddle。

以编程方式更改时，Select2 AJAX不会更新

3 个答案: