更新jquery select2多个实例的可用选择

Question

我有两个jquery select2实例，它们具有相同的选项和相同的类，我希望每次我在一个select2实例中选择一个选项时，它在两个实例中都不可用

<select class="select2-element" multiple="multiple"> //instance 1
    <option value="AL">Alabama</option>
    ...
    <option value="WY">Wyoming</option>
</select>

<select class="select2-element" multiple="multiple"> //instance 2
    <option value="AL">Alabama</option>
    ...
    <option value="WY">Wyoming</option>
</select>

编辑为简单起见，我提到我有两个选择元素，但实际上我有x个元素是动态生成的

Answer 1

为第二个<select>标记提供一个ID，例如<select id="changeSelect"...

并在jQuery中添加添加侦听器，例如：

$('select2-element').on('change', function() {
  var selectValue = $(this).val(); 
  $('#changeSelect').val( selectValue);
});

我还建议删除第一个<select>标记上的select2-element类，以防止第二个动态选择自身

Answer 2

好了，为避免所有实例都得到相同的选定项（如提到的@blubberbo），我给每个元素赋予了一个ID，并更改了检索选定选项的方式。 我将select2.js生成的类用作选择器，以从select2元素中获取选定的选项。

    $('#Save').click(function () {
        $('.select2-element').each(function () {
            var instance = $(this).attr('id');
            $('#s2id_' + instance + ' li.select2-search-choice div').each(function () {
                alert($(this).attr('id'));
            });
        });
    });

li.select2-search-choice下的div元素没有id属性，因此我将其添加到select2.js中，如下所示：

choice.find("div").replaceWith("<div id="+id+" >"+formatted+"</div>");