multiple select element - onchange

In your fiddle, I just used .val(). This returns an array

JSFiddle Link

$(function() {
    $('#fruits').change(function() {
        console.log($(this).val());
    }); 
});

.val() on a multiple select returns an array.

See the snippet below as an example:

$(function() {
    $('#fruits').change(function(e) {
        var selected = $(e.target).val();
        console.dir(selected);
    }); 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple="true" id="fruits">
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="mango">Mango</option>
    <option value="grape">Grape</option>
    <option value="watermelon">watermelon</option>
</select>

You could use blur instead of change, so that the select is only processed once, rather than on each selection. http://jsfiddle.net/2mSUS/3/


If you could use jQuery it might be as easy as:

$('select').change(function() {alert($(this).val())})