JSFiddle - React, Tailwind, and code Playground

by Ufuk Ozdemir

HTML

<script src="https://harvesthq.github.io/chosen/chosen.jquery.js"></script>
<link rel="stylesheet" href="https://harvesthq.github.io/chosen/chosen.css">
<select class="chozen" id="entities" multiple>
   <option data-name="Joe Blow" data-id="3" data-age="27">Joe Blow</option>
   <option data-name="Trish Thompson" data-id="4" data-age="21">Trish Thompson </option>
   <option data-name="Sam Jones" data-id="5" data-age="43">Sam Jones</option>
</select>

<select class="chozen" id="entities" multiple>
   <option data-name="Joe Blow" data-id="3" data-age="27">Joe Blow</option>
   <option data-name="Trish Thompson" data-id="4" data-age="21">Trish Thompson </option>
   <option data-name="Sam Jones" data-id="5" data-age="43">Sam Jones</option>
</select>


<button type="submit">get selected values</button>
<br>

JavaScript

jQuery(document).ready(function($){
    $('.chozen').chosen();
    
    
    $('button').click(function(e){
        e.preventDefault();
        var data = [];
        $(".chozen option:selected").map(function(){
            data.push({
                name: $(this).data('name'),
                id: $(this).data('id'),
                age: $(this).data('age')
            });
        });
        
        // now you can use data
        
        $('p').html(JSON.stringify(data) + '<br>');
    });
    
});