tag and returning multiple values to javascript method

问题

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

回答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

回答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>

回答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

回答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).

来源：https://stackoverflow.com/questions/22256486/select-tag-and-returning-multiple-values-to-javascript-method

标签

javascript