JSFiddle - React, Tailwind, and code Playground

by Jerome De Cuyper

HTML

<link rel="stylesheet" href="http://ivaynberg.github.io/select2/select2-3.5.1/select2.css">
<script src="http://ivaynberg.github.io/select2/select2-3.5.1/select2.js"></script>
<div>
    <select multiple name="m1" id="m1" style="width:300px" class="populate">
    <option name=red value=1>red</option>
    <option name=blue value=2>blue</option>
    <option name=green value=3>green</option>
    </select>
</div>
<div>
    <input type="text" id="m1selectedItem" name="m1selectedItem" style="width:200px;" /></div>
<div>
     <input type="text" id="m1selectedItemIds" name="m1selectedItemIds" style="width:200px;" />
</div>
<div>
    <input id="submit_selection" type="submit" text="Submit" />
</div>

JavaScript

$("#m1").select2();
            
$("#submit_selection").click(function () { 
    
    var selectedItems = "";
    var selectedItemIds = "";
    var separator = "";
    for(var i = 0; i < $("#m1").select2("data").length; i++)
    {
        selectedItems += separator + $("#m1").select2("data")[i]["text"];
        selectedItemIds += separator + $("#m1").select2("data")[i]["id"];
        separator = " ";
    }
    $("#m1selectedItem").val(selectedItems);
    $("#m1selectedItemIds").val(selectedItemIds);
    
});