Select2 依赖下拉菜单列表

Question

我正在尝试使用Select2插件来实现四个下拉列表相互依赖。 我一直在努力寻找更新加载选项数据的正确方法。

我的目标是通过ajax加载新数据，但是一旦我在客户端中拥有它，我就无法将新数据添加到选择列表中。

我尝试过的代码如下：

$(#"a3").select2({
    placeholder: "select an item",
    allowClear: true}).on("change",
    function (e) {
         var results = $.get("url?id=2",
            function (data, textStatus, jqXHR) {
                $(this).select2({ data: { results: data, text: "Name" } });
        });
    }
); 

这里有另一个问题: select2动态更改选项，但是那里的解决方法只适用于Select2 v3.2而不适用于Select2 v3.3。

- Lee Baker

Answer 1

Igor已经回到我身边，并提出了一种实现这个的方法。

var data=[...];    
$().select2({data: function() {return {results:data};}});    
/// later    
data=[...something else];    
// next query select2 will use 'something else' data

- Lee Baker

---

太棒了，我一直在寻找这个。由于 Knockout，在某些浏览器中反复调用 select2({...}) 会导致严重的内存泄漏。只是提醒一下你所写的：如果你尝试仅返回数据，Select2 将抛出错误。你需要返回一个对象，其中数据位于 results 索引中。因此：return {results: data}。 - treeface

请问您能否提供您代码的完整示例？我还需要使用select2使依赖下拉框正常工作。 - Mindaugas Li

这对我不起作用，回调从未被调用（Select2 v4） - Pierre de LESPINAY

Answer 2

正确的格式是：

.select2("data", {...})

- igor.vaynberg

---

谢谢Igor，我发现使用该方法会尝试根据我传入的数据在下拉菜单中选择一个项目。 - Lee Baker

Answer 3

对于Select2 v4.x，这里有一个小的 js class。

使用此类，select2列表框的选项将根据另一个select2列表框的选择通过ajax加载/刷新。并且依赖关系可以链接。

例如 -

new Select2Cascade($('#country'), $('#province'), 'path/to/geocode', {type:"province", parent_id: ''});
new Select2Cascade($('#province'), $('#district'), 'path/to/geocode', {type:"district", parent_id: ''});

在CodePen上查看演示。此外，这里有一篇关于如何使用它的文章（how to use）。

- Anis

Answer 4

这里有一种不需要使用Ajax的方法。你可以在codepen上查看一个可工作的示例。

$(document).ready(function() {
  $('#groups').select2({
    placeholder: "Choose Group",
    width: '300px',
  });
  $('#items').select2({
    placeholder: "Choose Item",
    width: '300px',
  });
});
  
$('#groups').on('select2:select', function(event) {
  let group = event.params.data.id;
  $('#items').html('<option></option');
  $('#item-options option').each(function() {
    if ($(this).hasClass(group)) {
      let option = $(this).clone();
      $('#items').append(option[0]);
    }
  })
});

body {
  font-family: sans-serif;
  width: 730px;
  margin: 20px auto;
}

.select {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 300px;
  margin: 40px auto;
}

.select2-container {
  margin: 10px;
}

.hidden {
  display: none;
}

<div class="select">
  <select id="groups">
    <option></option>
    <option value="1">Group 1</option>
    <option value="2">Group 2</option>
  </select>
  <select id="items">
  </select>
</div>

<div id="item-options" class="hidden">
  <option class="1" value="A">Group 1: Item A</option>
  <option class="1" value="B">Group 1: Item B</option>
  <option class="1" value="C">Group 1: Item C</option>
  <option class="2" value="R">Group 2: Item R</option>
  <option class="2" value="S">Group 2: Item S</option>
</div>

https://codepen.io/lflier/pen/xxWXwpg

- lflier