选择2:选择新标记后更新选项

Select2: Update option after selecting new tag

本文关键字：选择 更新 选项 新标记      更新时间：2023-09-26

我实现了一个标记系统，您可以从现有标记中进行选择或添加新标记。在选择了一个新标签后，它将使用AJAX调用进行持久化。

为了实现这一点，我使用回调createTag和事件select2:select。因为我喜欢只在选择标记时创建标记，所以如果事件select2:select被触发，我会为此执行AJAX调用。

问题是，我需要用将新标签持久化到数据库中得到的ID更新已经创建的select2选项。最干净的解决方案是什么？

这是我的：

$('select.tags').select2({
     tags: true,
     ajax: {
         url: '{{ path('tag_auto_complete') }}',
         processResults: function (data) {
             return {
                 results: data.items,
                 pagination: {
                     more: false
                 }
             };
         }
     },
     createTag: function (tag) {
         return {
             id: tag.term, // <-- this one should get exchanged after persisting the new tag
             text: tag.term,
             tag: true
         };
     }
 }).on('select2:select', function (evt) {
     if(evt.params.data.tag == false) {
         return;
     }
     $.post('{{ path('tag_crrate_auto_complete') }}', { name: evt.params.data.text }, function( data ) {
        // ----> Here I need to update the option created in "createTag" with the ID
        option_to_update.value = data.id;
     }, "json");
 });

我的问题是没有将新标记作为<option>标记添加到本机选择字段。

这是必要的，因为如果确实存在具有此值的<option>标记，select2将检查通过select2.val(values)设置的值。如果不是select2，则静默地将值抛出数组，并设置在底层select字段中具有相应选项标记的值数组。

所以这就是它现在正确工作的方式（对于select2 4.0.x）：

$('select.tags').select2({
     tags: true,
     ajax: {
         url: '{{ path('tag_auto_complete') }}',
         processResults: function (data) {
             return {
                 results: data.items,
                 pagination: {
                     more: false
                 }
             };
         }
     },
     createTag: function (tag) {
         return {
             id: tag.term,
             text: tag.term,
             tag: true
         };
     }
 }).on('select2:select', function (evt) {
     if(evt.params.data.tag == false) {
         return;
     }
     var select2Element = $(this);
     $.post('{{ path('tag_crrate_auto_complete') }}', { name: evt.params.data.text }, function( data ) {
        // Add HTML option to select field
        $('<option value="' + data.id + '">' + data.text + '</option>').appendTo(select2Element);
        // Replace the tag name in the current selection with the new persisted ID
        var selection = select2Element.val();
        var index = selection.indexOf(data.text);            
        if (index !== -1) {
            selection[index] = data.id.toString();
        }
        select2Element.val(selection).trigger('change');
     }, 'json');
 });

最小AJAX响应（JSON格式）必须如下所示：

[
    {'id': '1', 'text': 'foo'},
    {'id': '2', 'text': 'bar'},
    {'id': '3', 'text': 'baz'}
]

您可以为每个结果添加额外的数据，比如说，您可以自己呈现包含额外数据的结果列表。

仅更新：

新语法是

e.params.args.data.id

不是

e.params.data.id
相关文章：