更新 jquery 为多个实例选择 2 个可用选项

Question

我有两个 jquery select2 个具有相同选项和相同 class 的实例我希望每次我 select 一个 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>

编辑为简单起见，我提到我有两个 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 class 以防止第二个标签动态选择自身

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

更新 jquery 为多个实例选择 2 个可用选项

update jquery select2 available choices for multiple instances

html

javascript

jquery

jquery-select2