<select>标记并将多个值返回给javascript方法

Question

I have an issue with the data which is sent from a drop down menu, the selector only returns a single value, even when multiple values are selected. I have searched online for a solution to this, but they all use PHP, JQuery or some method outside the scope of the course I am taking; to capture multiple selected items. I have tried .value of the individual options, but that returns all of the options rather than just the ones which are selected. Is there some kind of trick to sending multiple values?

Here is my code for the menu. For example If I select JAVA PROGRAMMING, NETWORKS and VIDEO GAMES, only JAVA PROGRAMMING is sent.

<select multiple id="CK_Expertise">
  <option id="CK_Exp1" value="Java programming">JAVA PROGRAMMING</option>
  <option  id="CK_Exp2" value="Networks">NETWORKS</option>
  <option  id="CK_Exp3" value="Video game programming">VIDEO GAMES</option>
  <option  id="CK_Exp4" value="Accounter">ACCOUNTER</option>
  <option  id="CK_Exp5"  value="Help Desk">HELPDESK</option>
  <option  id="CK_Exp6"  value="C++ programming">C++</option>
  <option  id="CK_Exp7"  value="Programming">PROGRAMMING</option>
</select>

I have also tried using the Select Object in the DOM, http://www.w3schools.com/jsref/dom_obj_select.asp which has a few methods for accessing the options in the dropdown menu. One method in particular called selectedIndex, seemed to be what I am looking for, however it only returns the the index of the first selected option, instead of all of the selected options.
Is there a simple solution to this using just Javascript and the DOM?

Thanks - Chris

Answer 1

Get the options, iterate and check if they are selected, and add the values to an array

var select = document.getElementById('CK_Expertise'),
   options = select.getElementsByTagName('option'),
   values  = [];

    for (var i=options.length; i--;) {
        if (options[i].selected) values.push(options[i].value)
    }

    console.log(values)

FIDDLE

or being a little more fancy

var select = document.getElementById('CK_Expertise'),
    values = Array.prototype.filter.call(select.options, function(el) {
        return el.selected;
    }).map(function(el) {
        return el.value;
    });

    console.log(values)

FIDDLE

Answer 2

You could use the select . selectedOptions property:

select.onchange = function() {
  var values = [].map.call(this.selectedOptions, function(opt){
    return opt.value;
  });
};

 document.getElementById('CK_Expertise').onchange = function() { document.querySelector('pre').textContent = JSON.stringify([].map.call( this.selectedOptions, function(opt){ return opt.value; } )); }

 <select multiple id="CK_Expertise"> <option id="CK_Exp1" value="Java programming">JAVA PROGRAMMING</option> <option id="CK_Exp2" value="Networks">NETWORKS</option> <option id="CK_Exp3" value="Video game programming">VIDEO GAMES</option> <option id="CK_Exp4" value="Accounter">ACCOUNTER</option> <option id="CK_Exp5" value="Help Desk">HELPDESK</option> <option id="CK_Exp6" value="C++ programming">C++</option> <option id="CK_Exp7" value="Programming">PROGRAMMING</option> </select> <pre></pre>

Answer 3

If you can use jQuery, this will give you all the values

 $(document).ready(function(){
    $('#CK_Expertise').change(function(e){
        var values = $('#CK_Expertise').val()
        alert(values);
    });
});

HTH, -Ted

Answer 4

You could iterate storing select.selectedIndex in an array and unselecting the corresponding option to get the next one:

select.onchange = function() {
    var i, indices=[], values = [];
    while((i=this.selectedIndex) > -1) {
        indices.push(i);
        values.push(this.value);
        this.options[i].selected = false;
    }
    while((i=indices.pop()) > -1)
        this.options[i].selected = true;
    console.log(values);
}

Demo

This way you avoid iterating over all options, but you must iterate twice over the selected ones (first to unselect them, them to select them again).

Answer 5

Why not using an indexed variable in the SELECT command?

<SELECT MULTIPLE id="stuff" name="stuff[]">
<OPTION value=1>First stuff</option>
<OPTION value=2>Second stuff</option>
<OPTION value=3>Third stuff</option>
</SELECT>

In that case it's easy to read the array:

$out=$_REQUEST['stuff'];
foreach($out AS $thing) {
    echo '<br />'.$thing;
}

Sorry for the poor indentation, but I just wanted to show the way I use for solving this case!

Answer 6

var select = document.getElementById('CK_Expertise'),
  options = select.selectedOptions,
  values = [];

for(let i=0;i<options.length;i++)
{
  values.push(options[i].value);
}
console.log(values);