加载数组数据时重置多选2

Posted 2023-05-07

【中文标题】加载数组数据时重置多选2

【英文标题】：Reset multiple select2 when loading array data

【发布时间】：2017-05-06 04:48:24

【问题描述】：

我需要更新一个数组数据源。使用https://***.com/a/28271338/161457 中的重置/清除技术不会清除选项；控件将它们组合在一起（代码 sn-p 中的一、二、三、四）。如何清除控件并重新初始化选项？

$(function () 
  var initialData = [ id: 1, text: 'one' ,  id: 2, text: 'two' ];
  
  $("#test").select2(
    data: initialData
  );
  
  $('#change').click(function () 
    var newData = [ id: 3, text: 'three' ,  id: 4, text: 'four' ];
    
    $('#test').val([]);  // Attempt to clear
    
    $("#test").select2(
      data: newData
    );
  );
);

@import url('https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css');

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

<form>
<select id="test" name="test" multiple="multiple" style="width: 50%"></select>
</form>

<button type="button" id="change">Change</button>

【参考方案1】：

不幸的是，这对于原生 Select2 功能是不可能的，必须手动完成。

查看这个 GitHub 问题：https://github.com/select2/select2/issues/2830

基本上，您需要销毁 Select2 实例，然后通过重新初始化来重新填充它。下面的代码又快又脏，我相信有更好的写法：

$(function () 
  var initialData = [ id: 1, text: 'one' ,  id: 2, text: 'two' ];

  //good practice to cache your jquery objects:
  var $test = $("#test");
  
  $test.select2(
    allowClear: true,
    data: initialData
  );
  
  $('#change').click(function () 
    var newData = [ id: 3, text: 'three' ,  id: 4, text: 'four' ];

    //clear chosen items
    $test.val("").change();

    //destroy select2
    $test.select2("destroy");        

    //remove options physically from the html
    $test.find("option").remove();

    //re-initialize with new data
    $test.select2(
      data: newData
    );
    
  );
);

@import url('https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css');

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

<form>
<select id="test" name="test" multiple="multiple" style="width: 50%"></select>
</form>

<button type="button" id="change">Change</button>

【讨论】：

哇；令人惊讶的是他们解决了这个问题。

我也这么认为，考虑到 cmets 的数量，这似乎是一个很常见的问题！虽然，修复很容易完成。如果您打算在代码中一遍又一遍地使用它，我建议您在传入目标对象的地方创建一个自己的函数。祝你好运！

是的，我接受了。我确实发现调用 $("#test").empty() 然后用新数据重新初始化它（就像你做的那样）似乎清除了任何现有的选择和选项。

是的，我认为它会，只是很彻底。虽然，有人可能会说我是“浪费”......很好！我在工作，并没有花很多时间编写代码，但很高兴它对你有用！

【参考方案2】：

当我运行 AJAX 请求并用新项目填充 select2 时，我就是这样做的：

var categoryGroups = response.data;
$.each(categoryGroups, function (key, categoryGroup) 
    $groupList.append(
        '<option value="' + categoryGroup.id + '">' +
            categoryGroup.name +
         '</option>'
    );
);

$groupList.change();

$groupList 是选择元素的选择器。

更新：

另一种方法是：

$('#test').empty()

$('#test').select2(data: newData)

【讨论】：

我不想附加到现有值；我想更换它们。此外，必须直接附加 option 元素似乎是错误的； select2 应该可以处理。

尝试可能适用于您的情况的替代方法。我更新了我的答案。

val("").change() 方法只是清除选择的项目，而不是 <option>s

尝试将 newData 数组更改为 [ 3: 'three' , 4: 'four' ]

撤消我的反对票和赞成票，就像empty() + 重新初始化作品一样。就我个人而言，我发现完全改变答案的重复编辑令人沮丧。请在您的下一个答案中考虑这一点。