JSFiddle - React, Tailwind, and code Playground

by HemalathaThanigaivel

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.min.js"></script>
<!-- col-4 -->
<div class="col-lg-3">
   <div class="form-group" id="pincode_div">
      <label class="form-control-label" for="pincode">Pincode:</label>
      <select class="form-control select2" multiple name="pincode[]" id="pincode" data-placeholder="Please select State first" style="width:100%;">
      </select>
   </div>
</div>
<!-- col-4 -->
<!--
Given are the excel copied inputs, all pincode should matched except 401203 and 40008

380001
401203
396472
421301
382418
400002
400008

-->

CSS

.select2 .select2-container .select2-container--default { width: 100%; }
.select2-search__field { width: 100%; }

JavaScript

var arr_pincode = JSON.parse('{"24":[380001,380008,380013,380015,380016,380018,380021,380022,380028,382220,382340,382345,382350,382405,382418,382425,382440,383001,383110,390006,390011,390017,390022,390025,394210,395003,395004,395009,396325,396350,396360,396433,396445,396472],"27":[400002,400003,400004,400005,400009,400011,400012,400022,400029,400033,400034,400043,400050,400051,400054,400057,400058,400059,400060,400061,400062,400063,400066,400067,400068,400069,400070,400072,400074,400075,400076,400077,400083,400084,400086,400088,400089,400092,400095,400097,400101,400104,400615,400701,401101,401104,401105,401107,401208,401209,401303,421001,421201,421202,421301]}');
var selected_state = [24, 27];
var selected_pin = JSON.parse('[]');

$(document).ready(function() {

		

    $('.select2').select2({
        minimumResultsForSearch: Infinity
    });



    $.each(selected_state, function(key, elem) {
        preSelectPin(elem, selected_pin);
    });
    
});

function preSelectPin(cur_state, selected_pin) {
console.log(cur_state, 'current')
    if (cur_state > 0 && arr_pincode.hasOwnProperty(cur_state)) {
        $.each(arr_pincode[cur_state], function(key, element) {
            if ($.inArray(String(element), selected_pin) > -1) {
        console.log(element, 'element')
            
                $("#pincode").append($('<option>', {
                    value: element,
                    text: element,
                    'class': 'state_' + cur_state,
                    selected: true,
                }));
            } else {
                $("#pincode").append($('<option>', {
                    value: element,
                    text: element,
                    'class': 'state_' + cur_state,
                }));
            }
        });

    }
}

function print_console(key, value) {
    console.log('------- ' + key + ' -----------');
    console.log(value);
}