选择2动态更改项目

Question

我有两个链接的选择：第一个选择的每个值决定哪些项目将显示在第二个选择中。

第二个select的值存储在二维数组中：

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

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

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

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>

Answer 1

我为您制作了一个示例，展示了如何做到这一点。

注意 js，还要注意我将 #value 更改为输入元素

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

并且我正在触发

change

事件来获取初始值

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

代码示例

编辑：

在 select2 的当前版本中，类属性从隐藏输入转移到 select2 创建的根元素中，甚至是将元素定位到页面限制之外的

select2-offscreen

类。

要解决此问题，所需要做的就是在同一元素上第二次应用 select2 之前添加

removeClass('select2-offscreen')

。

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

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

Answer 2

我成功地使用以下方法动态更新选项：

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

Answer 3

尝试使用触发器属性：

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

Answer 4

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

<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/

Answer 5

对于 v4，这是一个已知问题，4.0 中不会解决，但有一个解决方法。检查https://github.com/select2/select2/issues/2830

Answer 6

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

$('#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部分。其余代码仍然有效。

Answer 7

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

Answer 8

如果您正在寻找通过从服务器端（Api）获取数据来更改另一个下拉数据的代码。你应该尝试一下这个。

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

Answer 9

您需要将选项添加到 HTML 选择器，然后使用 .val() 来设置它们

HTML：

<select id="test-select">
    <option value="test-value-static">test-value-static</option>
</select>

JS：

const selector = $('#test-select');
//options to be added at runtime
const defaultOptions = ['test-value-1', 'test-value-2']; 
selector.append(
        defaultOptions
            .filter((str) => { //only if not already present
                return !selector.find("option[value=\"" + str + "\"]").length;
            })
            .map((str) => { //generate options html 
                return "<option value=\"" + str + "\">" + str + "</option>";
            })
);
selector
    .val(defaultOptions)
    .trigger('change');