Select2 以编程方式更改数据

Question

当我更改另一个 select2 下拉列表的值时，我正在尝试以编程方式更改 select2 下拉列表中的数据集。

我遇到的问题很奇怪，因为它似乎改变了徽章值，而不是选项本身。您可以在徽章中看到 2 和 3，但一个数据集中的文本值完全不同，但不会更改选项。

这是一个展示我的意思的小提琴。 https://jsfiddle.net/jamiebrs/8axy7123/

这是formatText 函数：

function formatText (icon) {
  if(icon.badge == undefined){
    return  $('<span>' + icon.text + '</span>');
  } else {
    return  $('<span><span class="badge">'+ icon.badge + '</span> ' + icon.text + '</span>');
  }
}

这是尝试触发#fam选项时更改#products 987654324选项的事件。 eval(d) 调用采用选定的值并检索我定义的相应变量，其中包含 #products 的正确选项。

$('#fam').select2().on('change', function() {
  d = $(this).val();

  $('#products').val(null).trigger('change');
  $('#products').select2({
    data: eval(d),
    width: "100%",
    theme: 'bootstrap4',
    placeholder: "Select item",
    allowClear: true,
    templateSelection: formatText,
    templateResult: formatText
  }).trigger('change');
})

Answer 1

您有几个问题需要解决。首先，一旦 select2 用数据初始化，它将保留所有选项。你的代码调用这个：

$('#products').val(null).trigger('change')

不会清空下拉列表中的选项，它只是取消选择已选择的任何选项（因此，如果您选择了“增强”和“错误”，它将取消选择这些选项）。我假设您查看了select2 documentation 的Clearing Selections 部分并假设它清空了选项。

您需要做的是完全清除所有选项，销毁 select2 实例，然后使用正确的数据重新初始化它，如下所示：

$('#products').empty().select('destroy').select2({/* your options here */});

我注意到您的问题并提出了一些建议您更改的内容：

1. 将您的 #products 配置移动到一个变量中，以便您可以重用和覆盖它
2. 将您的#products 选项放入由相应#fam 选项值作为键的对象中，这样您就可以从该对象中检索正确的选项，而不是调用eval()，即dangerous and should not be used。

您的代码将如下所示：

const productOptions = {data1: [/*...*/], data2: [/*...*/]};
const productsConfig = {
  width: "100%",
  theme: 'bootstrap4',
  placeholder: "Select item",
  allowClear: true,
  templateSelection: formatText,
  templateResult: formatText
};

$('#fam').select2().on('change', function() {
  // get selected value from the #fam select2
  const selected = $(this).val();

  // get the new products config (products config + data options)
  const newProductsConfig = Object.assign({},
    productsConfig,
    {data: productOptions[selected]}
  );

  // destroy the existing products select2 and re-initialize
  $('#products').empty().select2('destroy').select2(newProductsConfig);
});

然后当您最初加载页面时，您可以使用 products config 对其进行初始化，然后在触发 .change() 事件的同时初始化 fam select2 以自动填充 products 选项：

// initialize the products select2 on page load
$('#products').select2(productsConfig);

// initialize the fam select2 and trigger the change event
// which will properly populate products options with whatever
// fam option is currently selected on page load
$('#fam').select2({
  theme: 'bootstrap4', 
  placeholder: "Select item",
  width: "100%"
}).change();