JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js&quot; 			  integrity=&quot;sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=&quot; 			  crossorigin=&quot;anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<select name="country[]" multiple="" data-placeholder="Select country" class="form-control chzn-select" required="required" id="country">
                                                        <option disabled="disabled" value="1">Abu Dhabi</option>
                                                            <option value="2">Dubai</option>
                                                                <option disabled="disabled" value="3">Singapore</option>
                                                            <option disabled="disabled" value="4">Thailand</option>
                                                            <option value="8">Afghanistan</option>
                                                                <option value="All">All</option>
                                                    </select>

JavaScript

$(".chzn-select").select2({selectOnClose: true}).on("select2:selecting", function(evt) {
          if(evt.params.args.data.id == 'All') {
           
          } else {
            
          }
        });