Select2 v4: select multiselect 中的选项从 Excel Sheet 粘贴

Select2 v4: select option in multiselect on paste from Excel Sheet

我有这样的场景,我们的后端团队将从 Excel select pincodes 并将其粘贴到 pincode multiselect select2 下拉列表中。

我需要 select 与存在的选项下拉列表完全匹配的选项,并删除与粘贴的输入不匹配的选项。

我参考了给定的例子,但没有运气。
1- Is it possible to paste a list to a select2 field and match each item in the list?
2-

鉴于 excel 复制的输入,除了 401203 和 40008

之外,所有密码都应该匹配
 380001
 401203
 396472
 421301
 382418
 400002
 400008

给出的是fiddle。 jsFiddle for pasting excel inputs

在混合 RnD 和调整之后,我找到了一个完美实现我们想要的解决方案。

我在 select2 的父级 div 上添加了 id,然后将 paste 事件绑定到输入。

$('#pincode_div').on('paste', function (e) {

    var pastedData = e.originalEvent.clipboardData.getData('text').trim();
    tokens = pastedData.split(/\r\n|\r|\n/g); 

    /* print_console('pastedData', pastedData) */;
    /* print_console('tokens', tokens) */;

    $('#pincode > option').each(function(){
       current_pin.push(this.value);
    });

    found_pin = tokens.filter(value => current_pin.includes(value));

    /* print_console('found_pin', found_pin) */;
    /* print_console('current_pin', current_pin) */;

    //print_console('current input', $('#pincode_div').find('input').val());
    $('.select2-search__field').val('');
    $('#pincode_div').find('input').attr('class')
    $('#pincode').val('');
    $("#pincode").val(found_pin).trigger("change");


});

完整代码在这里Solved jsFiddle

你们可以更新我的答案或分享更好的解决方案。

我有同样的需求,我找到了这个问题的确切解决方案。使用以下 HTML 和脚本,用于下面给出的多个 select 和 css:

<select class="mySelect for" multiple="multiple" style="width: 100%;" ng-model="">

           var placeholder = "Type or paste numbers";
            $(".mySelect").select2({
                tokenSeparators: [',', ', ', ' '],
                data: [],
                placeholder: placeholder,
                allowClear: false,
                maximumSelectionSize: 1,
            });
            
            
            
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet"/>

<div class="col col-3 col-xs-12">
<label>Type or paste numbers</label>
<select class="mySelect for" multiple style="width: 100%;"></select>
</div>

CDN for select2 multiple

CDN style sheet for select2 multiple