Select2 v4：从Excel工作表粘贴时在多选中选择选项

Question

I have scenario where our back-end team will select pincodes from Excel and paste it on pincode multiselect select2 dropdown.

I need to select option which are exactly matched with option dropdown present and remove not match inputs pasted.

I have refer given examples but no luck.
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

Given are the excel copied inputs, all pincode should matched except 401203 and 40008

 380001
 401203
 396472
 421301
 382418
 400002
 400008

Given is the fiddle. jsFiddle for pasting excel inputs

Answer 1

after doing mix of RnD and tweaking I reached to a solution which perfectly does what we wanted.

I have added id on parent div of select2 then bind paste event to input.

$('#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");


});

Complete code here Solved jsFiddle

You guys can update my answer or share better solution.

Answer 2

I had same need and I found exact solution for this question. Use following HTML and script for multiple select and css given below:

<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