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>');
  }
}

这是一个试图#products，选择选项时触发改变#fam下拉选项的事件。的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')

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

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

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

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

将您的#products配置移动到变量中，以便您可以重用和覆盖它
将#products选项放入由相应的#fam选项值作为键的对象中，以便您可以从该对象中检索适当的选项，而不用调用{{3} }。

您的代码将如下所示：

eval()

然后，当您最初加载页面时，可以使用产品配置对其进行初始化，然后在触发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); });事件以自动填充产品选项的同时初始化fam select2：

.change()

Select2以编程方式更改数据

1 个答案: