multiple select element - onchange

Question

I have a select element that allows for multiple selections. I'd like to display the selected values in another part of the page (in a div or something) as the user makes changes to what is selected.

Is the only way of doing this to iterate over the "options" and check if "selected" is true? this would not be preferable since each "onchange" event would require the entire select element to be iterated over.

Here's a fiddle that demonstrates how I am currently doing it, but I'm hoping maybe there's a better way than having to iterate over all the options on every "change": multiple select elment onchange fiddle

Answer 1

.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>

Answer 2

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

JSFiddle Link

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

Answer 3

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

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

Answer 4

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/

Answer 5

$(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>