Select2 以编程方式更改数据

Question

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

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

这是一个fiddle来表达我的意思。 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 下拉选项的事件。 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')

不会清空 drop-down 列表中的选项，它只是 de-selects 任何已经选择的选项（所以如果您选择了 'enhancement' 和 'bug'，它会有 de-selected 那些）。我假设您查看了 Clearing Selections section of the select2 documentation 并假设它清空了选项。

您需要做的是完全清除所有选项，销毁 select2 实例，然后 re-initialize 使用正确的数据对其进行销毁，如下所示：

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

我在你的问题中注意到 fiddle 一些我建议你改变的事情：

将您的 #products 配置移动到一个变量中，以便您可以重复使用和覆盖它
将您的 #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);
});

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

// 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();

Select2 以编程方式更改数据

Select2 Changing Data progamatically

forms

jquery

jquery-select2