JSFiddle - React, Tailwind, and code Playground

by Ritesh Pandey

HTML

<script src="http://cdn.jsdelivr.net/select2/3.4.8/select2.min.js"></script>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/select2/3.4.8/select2.css">
<!-- Playing with Select2 plugin -->
<form id="testForm">
<div class="my-select-wrap">
    <select id="select2" 
    multiple="multiple" 
    name="myselect[]" 
    data-placeholder="Select any one"
    class="my-select">
        <option value="one" selected>One</option>
        <option value="two" selected>Two</option>
        <option value="three">Three</option>
        <option value="four">Four</option>
        <option value="five">Five</option>
        <option value="six">Six</option>        
        <option value="seven">Seven</option>
</select>
</div>
</form>
<input type="button" id="myBtn" value="Get Data" />

<div id="result"></div>

CSS

.my-select-wrap{
    margin: 0 0 5px 0;
}
.my-select{
    width: 300px;
}

JavaScript

$(function () {
    $("#select2").select2({
        matcher: function () {
            console.log("arguments");
            console.log(arguments);
            return false;
        }
    });
    
    $("#myBtn").click(function () {
        var serialize = $("#testForm").serialize();
        $("#result").text(serialize);
        console.log("asdasdasd");
    });
});