Displaying multiple Select Values into an alert?

Question

I'm still a beginner hence this is difficult, but how do I display the options I selected into an alert box. So it would be "You selected (value), (value), (value)".

This is my select list

<form id='form1'>
    <select id="options" multiple >
        <option value="action">Action</option>
        <option value="animation">Animation</option>
        <option value="children">Children</option> 
        <option value="classics">Classics</option> 
        <option value="comedy">Comedy</option>
        <option value="documentary">Documentary</option>
        <option value="drama">Drama</option>
        <option value="family">Family</option> 
        <option value="foreign">Foreign</option>
        <option value="games">Games</option>
        <option value="horror">Horror</option>
        <option value="music">Music</option>
        <option value="new">New</option>
        <option value="scifi">Sci-Fi</option>
        <option value="sports">Sports</option> 
        <option value="travel">Travel</option> 
    </select>
</form>

Should I add a button. But what I'm struggling with is the javascript.

Please add what your Javascript file looks like – idelara Nov 23 '17 at 00:49 — idelara, Nov 23 '17 at 00:49

score 0 · Answer 1 · answered Nov 23 '17 at 00:59

Try something like this:

function selectedValues()
{
  var x=document.getElementById("options");
  var selectedValues= '';
  for (var i = 0; i < x.options.length; i++) {
     if(x.options[i].selected ==true){
          selectedValues += x.options[i].value + ", ";
      }
  }
  alert("You selected: "+ selectedValues.slice(0, -2));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id='form1'>
<select id="options" multiple onchange="selectedValues()">
<option value="action">Action</option>
<option value="animation">Animation</option>
<option value="children">Children</option> 
<option value="classics">Classics</option> 
<option value="comedy">Comedy</option>
<option value="documentary">Documentary</option>
<option value="drama">Drama</option>
<option value="family">Family</option> 
<option value="foreign">Foreign</option>
<option value="games">Games</option>
<option value="horror">Horror</option>
<option value="music">Music</option>
<option value="new">New</option>
<option value="scifi">Sci-Fi</option>
<option value="sports">Sports</option> 
<option value="travel">Travel</option> 
</select>
</form>

score 0 · Accepted Answer · answered Nov 23 '17 at 01:07

The easiest way to access selected elements of a select tag is with the "selectedOptions" property. I would do it this way:

var form = document.getElementById('form1');
form.addEventListener('submit', function () {
    var select = form.querySelector('#options'),
        options = select.selectedOptions,
        values = [];

    for (var i = options.length - 1; i >= 0; i--) {
        values.push(options[i].value);
    }

    alert('You selected: ' + values.join(', '));
}, false);

Ah Works like a charm after adding submit thanks so much man. — Adrian Causby, Nov 23 '17 at 01:15

Displaying multiple Select Values into an alert?

2 Answers2