Select2 v4：从 Excel 表粘贴时在多选中选择选项答案

【问题标题】：Select2 v4: select option in multiselect on paste from Excel SheetSelect2 v4：从 Excel 表粘贴时在多选中选择选项
【发布时间】：2019-07-31 07:31:45
【问题描述】：

我有一个场景，我们的后端团队将从 Excel 中选择 pincode 并将其粘贴到 pincode 多选 select2 下拉列表中。

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

我参考了给出的例子，但没有运气。
1-Is it possible to paste a list to a select2 field and match each item in the list?
2-Select2 Multiple: Add several items with one copy+paste

鉴于是 excel 复制的输入，除 401203 和 40008 外，所有密码都应匹配

Given 是小提琴。 jsFiddle for pasting excel inputs

【问题讨论】：

标签： javascript jquery excel jquery-select2

【解决方案1】：

我有同样的需求，我找到了这个问题的确切解决方案。使用以下 HTML 和脚本进行多项选择和下面给出的 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

【讨论】：

【解决方案2】：

在混合了 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

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

【讨论】：