Get selected options (onchange) from HTML to javascript array

Question

I would like to get selected options to javascript, then create array with the option text.

This is what i did for now:

 function selectMonthOnChange(month) {
    var selectedMonths = [];
    var selMonths = $('#sel_Months option:selected');
    
    $(selMonths).each(function(k) {
        selectedMonths.push(month.options[k].text);
    });
    console.log(selectedMonths);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select onchange="selectMonthOnChange(this)" id="sel_months" multiple="multiple ">
     <option value="1 ">Jan</option>
      <option value="2 ">Feb</option>
      <option value="3 ">Mar</option>
      ...
      <option value="12 ">Dec</option>
</select>

I want output (example, depends of selected months):

['Feb', 'May', 'Dec'];

I know, i'm doing something stupid and the answer is superb easy :) - gosh, I should take a break...

score 3 · Answer 1 · answered Jun 15 '18 at 11:26

You have quite a few issues here, such as mismatched variable names (selecetedMonths and selectedMonths), a typo in the jQuery selector :seleceted, missing closing parentheses in the Js, extra double quotes in the HTML and a general mish-mash of native and jQuery methods.

To simplify this and also improve the logic you should use unobtrusive event handlers instead of outdated on* event attributes. Then you can simply use map() to create an array of text of the selected options, like this:

$(function() {
  $('#sel_months').change(function() {
    var arr = $(this).find('option:selected').map(function() {
      return $(this).text();
    }).get();

    console.log(arr);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="sel_months" multiple="multiple">
  <option value="1">Jan</option>
  <option value="2">Feb</option>
  <option value="3">Mar</option>
  <option value="4">Apr</option>
  <option value="5">May</option>
  <option value="6">Jun</option>
  <option value="7">Jul</option>
  <option value="8">Aug</option>
  <option value="9">Sep</option>
  <option value="10">Oct</option>
  <option value="11">Nov</option>
  <option value="12">Dec</option>
</select>

Bhumi Shah · Answer 2 · 2018-06-15T11:27:46.327

There is also an issue in each closing tag and other variables issue too:

DEMO: https://codepen.io/creativedev/pen/VdMmYy

HTML

<select onchange="selectMonthOnChange(this)" id="sel_months" multiple="multiple">
    <option value="1">Jan</option>
    <option value="2">Feb</option>
    <option value="3">Mar</option>
    <option value="12">Dec</option>
</select>

JS

function selectMonthOnChange(month)
{
      var selecetedMonths = [];
      var selMonths = $('#sel_months option:selected');
//console.log(selMonths)
      $(selMonths).each(function(k)
      {
         selecetedMonths.push(month.options[k].text);   
      }); 
  console.log(selecetedMonths);
}

score 1 · Answer 3 · answered Jun 15 '18 at 11:26

Seems you got some typos on your select ID. id=""sel_months" and not id=""sel_months" (one " is enought).

Also, you need to select the proper id, maybe you missed this one, or misstyped it (sel_months)

Here is a working solution, implemented there. How to get all selected values from <select multiple=multiple>?

let selectElement = document.getElementById('sel_months')
let selectedValues = Array.from(selectElement.selectedOptions)
    .map(option => option.value);

rawathemant · Accepted Answer · 2018-06-15T13:35:24.337

You did mistakes on closing each loop in jquery script
You did some mistakes on your select ID. id=""sel_months" and not id=""sel_months"
You console wrong variable.

This code will help you.

 function selectMonthOnChange(month)
{
      var selecetedMonths = [];
      var selMonths = $('#sel_months option:selected');
      $(selMonths).each(function(k)
      {
         selecetedMonths.push(month.options[k].text);   
      }); 
  console.log(selecetedMonths);
}

score -1 · Answer 5 · answered Jun 15 '18 at 11:22

You have some syntax and formatting problem. Other than that the code is working:

function selectMonthOnChange(month) {
  var selectedMonths = [];                              // misspelled `selected`
  var selMonths = $('#sel_months option:selected');     // misspelled `selected`

  selMonths.each(function(k) {
    selectedMonths.push(month.options[k].text);
  })                                                    // missing `)`
  console.log(selectedMonths);
}

Furthermore, there is a " you need to get rid of in the HTML:

<select onchange="selectMonthOnChange(this)" id="sel_months" multiple="multiple">

function selectMonthOnChange(month) {
  var selectedMonths = [];
  var selMonths = $('#sel_months option:selected');

  selMonths.each(function(k) {
    selectedMonths.push(month.options[k].text);
  })
  console.log(selectedMonths);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select onchange="selectMonthOnChange(this)" id="sel_months" multiple="multiple">
  <option value="1">Jan</option>
  <option value="2">Feb</option>
  <option value="3">Mar</option>
  <option value="12">Dec</option>
</select>

Get selected options (onchange) from HTML to javascript array

5 Answers5