select2 动态更改选项

Question

select2 动态更改选项

72

我有两个联动的下拉框：第一个下拉框的每个选项会决定第二个下拉框中显示哪些选项。

第二个下拉框的选项被存储在一个二维数组中：

[ [{"id":1,"text":"a"}, {"id":2,"text":"b"},...],
  [{"id":"1a","text":"aa"},{"id":"1b","text":"ba"},...],
  ...
]

第一个选择值确定用于填充第二个选择的索引。因此，在第一个选项上进行“更改”事件时，我应该能够修改包含在select-two中的项目。

阅读文档，我认为我需要使用“data”选项……但不确定如何操作，因为示例在初始化时加载数组数据，如果我尝试在初始化后执行相同操作似乎不起作用。

HTML

Attribute:
<select name="attribute" id="attribute">
    <option value="0">Color</option>
    <option value="1">Size</option>
</select>

Value:
<select name="value" id="value"></select>

<script>
   var data = [ [{"id":1,"text":"black"}, {"id":2,"text":"blue"},...],
                [{"id":"1","text":"9"},{"id":"1","text":"10"},...],
              ];
   $('#attribute').select2().bind('change', function(){
      // Here I need to change `#value` items.
      $('#value').select2('data',data[$(this).val()]);  // This does not work
   );

   $('#value').select2();
</script>

- Pherrymason

4

请展示您已有的代码。 - Aesthete

示例添加，注释中我尝试了$('#value').select2('data',data[$(this).val()]); - Pherrymason

https://dev59.com/-2Qn5IYBdhLWcg3w5qhg - ndpu

8个回答

37

我成功地使用以下代码动态更新选项：

$control.select2('destroy').empty().select2({data: [{id: 1, text: '新的文本'}]});

- akaspick

2

我在这个答案中遇到的一个问题是它会覆盖空选项/占位符。 - Michael MacDonald

3

如果您最初使用"data-data="在HTML标签中设置数据，则它将无法正常工作。 - Yevgeniy Afanasyev

11

尝试使用 "trigger" 属性：

$('select').select2().trigger('change');

- Fischer Tirado

17

请解释这段代码的作用以及为什么它能回答问题。 - Sverri M. Olsen

1

首先将新值分配给 select，然后触发更改，如下所示： $('select').select2().trigger('change'); $('select').select2().trigger('change'); - AG_

7

我在这里修复了示例库的缺失：

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.js">

http://jsfiddle.net/bbAU9/328/

- phanhongphucit

4

在我的项目中，我使用以下代码：

$('#attribute').select2();
$('#attribute').bind('change', function(){
    var $options = $();
    for (var i in data) {
        $options = $options.add(
            $('<option>').attr('value', data[i].id).html(data[i].text)
        );
    }
    $('#value').html($options).trigger('change');
});

尝试将select2部分注释掉。其他代码仍然可以正常工作。

- Michal Lohniský

4

对于v4版本，这是一个已知的问题，在4.0中不会得到解决，但有一个解决方法。请查看https://github.com/select2/select2/issues/2830

- FranBran

0

如果你正在寻找一段代码，它可以通过从服务器端获取数据来改变另一个下拉框的数据。那么你应该尝试这个。

$('#attribute').on('change', function (e) {
        $.post("../api", { id: e.val }).done(resp => {
            $("#value").select2('destroy').empty();
            resp.map(o => $("#value").append("<option value=\"" + o.Value + "\">" + o.Text + "</option>"));
            $("#value").select2();
        });
    });

- vicky

0

var data = [
    {
        id: 0,
        text: 'enhancement'
    },
    {
        id: 1,
        text: 'bug'
    },
    {
        id: 2,
        text: 'duplicate'
    },
    {
        id: 3,
        text: 'invalid'
    },
    {
        id: 4,
        text: 'wontfix'
    }
];

$('#attribute').select2({
    data: data
});

$("#attribute").select2().val(1).trigger('change');

- LN Nitharsan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- iMoses · Accepted Answer

我为你制作了一个示例，展示了如何完成这个操作。请注意JavaScript代码以及我将#value更改为输入元素的事实。

<input id="value" type="hidden" style="width:300px"/>

我正在触发change事件以获取初始值

$('#attribute').select2().on('change', function() {
    $('#value').select2({data:data[$(this).val()]});
}).trigger('change');

代码示例

编辑：

在当前版本的select2中，class属性被从隐藏的输入框转移到了由select2创建的根元素，甚至包括将元素定位到页面范围之外的select2-offscreen类。

要解决这个问题，只需要在第二次在同一元素上应用select2之前添加removeClass('select2-offscreen')即可。

$('#attribute').select2().on('change', function() {
    $('#value').removeClass('select2-offscreen').select2({data:data[$(this).val()]});
}).trigger('change');

我已经添加了一个新的 代码示例 来解决这个问题。