Javascript Get Values from Multiple Select Option Box

Asked
Active3 hr before
Viewed126 times

7 Answers

optionselectvaluesjavascriptmultiple
90%

I have a <select> element with the multiple attribute. How can I get this element's selected values using JavaScript? ,selectedOptions returns a list of selected items.,Where select is a reference to the <select> element., GitLab launches Collective on Stack Overflow

No jQuery:

// Return an array of the selected opion values
// select is an HTML select element
function getSelectValues(select) {
   var result = [];
   var options = select && select.options;
   var opt;

   for (var i = 0, iLen = options.length; i < iLen; i++) {
      opt = options[i];

      if (opt.selected) {
         result.push(opt.value || opt.text);
      }
   }
   return result;
}

Quick example:

<select multiple>
   <option>opt 1 text
   <option value="opt 2 value">opt 2 text
</select>
<button onclick="
  var el = document.getElementsByTagName('select')[0];
  alert(getSelectValues(el));
">Show selected values</button>
load more v
88%

The idea is to iterate over all dropdown options using the for…of statement and collect values of all the <option> elements having the selected attribute.,The following code gets the array of selected options using selectedOptions with the spread syntax (or Array.from()), and then map the <option> elements into their respective values.,The idea is to get an array of the all <option> elements contained within the <select> element and filter the selected ones. Then, we map the options into their respective values using the map() function.,We can select the multiple options in the dropdown list using the multiple attribute. There are several ways in JavaScript to return the selected values in a multi-select dropdown.

This post will discuss how to get the selected values in a multi-select dropdown in plain JavaScript.

We can select the multiple options in the dropdown list using the multiple attribute. There are several ways in JavaScript to return the selected values in a multi-select dropdown.

multiple
load more v
72%

document.getElementById('submit').onclick = function() {
   var selected = [];
   for (var option of document.getElementById('pets').options) {
      if (option.selected) {
         selected.push(option.value);
      }
   }
   alert(selected);
}
load more v
65%

function getMultipleSelected(fieldID){
 
           // fieldID is id set on select field

            // get the select element
            var elements = document.getElementById(fieldID).childNodes; 

           // if we want to use key=>value of selected element we will set this object
            var selectedKeyValue = {};
   
           // if we want to use only array of selected values we will set this array
            var arrayOfSelecedIDs=[];
 
           // loop over option values
            for(i=0;i<elements.length;i++){
 
              // if option is select then push it to object or array
              if(elements[i].selected){
               //push it to object as selected key->value 
               selectedKeyValue[elements[i].value]=elements[i].textContent;
               //push to array of selected values
               arrayOfSelecedIDs.push(elements[i].value)

              }
              
            }
            
            // output or do seomething else with these values :)

            console.log(selectedKeyValue);

            console.log(arrayOfSelecedIDs);
             
        }
load more v
75%

For windows: Hold down the control (ctrl) button to select multiple options,For Mac: Hold down the command button to select multiple options,A drop-down list that allows multiple selections:,When present, it specifies that multiple options can be selected at once.

Definition and Usage

The multiple attribute is a boolean attribute.

multiple
40%

You can use the jQuery :selected selector in combination with the val() method to find the selected option value in a select box or dropdown list.,If the value for an option is not defined specifically, the text content of the <option> element will be used as a value instead, as demonstrated in the following example:,Alternativley, you can use the jQuery text() method to get the text content of an element.,A multiple select box allows a user to select multiple options. Hold down the control key on Windows or command key on Mac to select multiple options. You can enable multiple section in a select box by adding the attribute multiple to the <select> tag. Here's an example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Selected Option Value</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("select.country").change(function(){
        var selectedCountry = $(this).children("option:selected").val();
        alert("You have selected the country - " + selectedCountry);
    });
});
</script>
</head> 
<body>
    <form>
        <label>Select Country:</label>
        <select class="country">
            <option value="usa">United States</option>
            <option value="india">India</option>
            <option value="uk">United Kingdom</option>
        </select>
    </form>
</body>
</html>
load more v
22%

Select2 can take a regular select box like this...,Select2 also supports multi-value select boxes. The select below is declared with the multiple attribute.,Select2 is licensed under MIT., Add, select, or clear items

<select class="js-example-basic-single" name="state">
   <option value="AL">Alabama</option>
   ...
   <option value="WY">Wyoming</option>
</select>
load more v

Other "option-select" queries related to "Javascript Get Values from Multiple Select Option Box"