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>
我有这样的场景,我们的后端团队将从 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>