Javascript: Get multiple values from a select input

Question

I have a select input box which allows me to select multiple values. In this case I have 4 categories and when I click on a category the subcategories appear. As you can see it's working just fine. The only issue is that when I select more then one category it shows the subcategories of the first selected category only. How can I show each category along with the subcategories when multiple categories are selected? For example if I select on category 1, category 2 & category 3, I want the following to show:

Category 1: Subcategory 1.1, Subcategory 1.2

Category 2: Subcategory 2.1, Subcategory 2.2

Category 3: Subcategory 3.1, Subcategory 3.2

    $('select').on('change', function () {
        var subcategories = '';
        var str = "This category contains these subcategories: ";
        var result = str.bold();

        switch (this.value) {
               case 'Category 1':
                subcategories = "Subcategory 1.1, Subcategory 1.2";
                break;
                
                case 'Category 2':
                subcategories = "Subcategory 2.1, Subcategory 2.2";
                break;
                
                case 'Category 3':
                subcategories = "Subcategory 3.1, Subcategory 3.2";
                break;
                
                case 'Category 4':
                subcategories = "Subcategory 4.1, Subcategory 4.2";
                break;
 
        }
        document.getElementById("showSubcategory").innerHTML = result + subcategories;
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple>
  <option value="Category 1">Category 1</option>
  <option value="Category 2">Category 2</option>
  <option value="Category 3">Category 3</option>
  <option value="Category 4">Category 4</option>
</select>

<div id="showSubcategory"></div>

Get [`selectedOptions`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedOptions) and iterate over it. — , Oct 28 '19 at 08:12
As @ChrisG suggest you can use `Array.from(this.selectedOptions).map(function(x) { return x.value; });` to get list of values. you can shorten that with ES6 `[...this.selectedOptions].map(x => x.value)`. — jcubic, Oct 28 '19 at 08:15
Possible duplicate of [How to get multiple select box values using jquery?](https://stackoverflow.com/questions/3243476/how-to-get-multiple-select-box-values-using-jquery) — , Oct 28 '19 at 08:17

Nidhin Joseph · Answer 1 · 2019-10-28T08:29:09.053

Instead of using switch, try assigning the values to an object and then append by iterating the value array.

$('select').on('change', function() {
  var subcategories = '';
  let val = {
    cat_1: "Subcategory 1.1, Subcategory 1.2",
    cat_2: "Subcategory 2.1, Subcategory 2.2",
    cat_3: "Subcategory 3.1, Subcategory 3.2",
    cat_4: "Subcategory 4.1, Subcategory 4.2"
  };
  $(this).val().forEach((v, i) => {
    subcategories += `<div> Category ${i+1}-  ${val[v]}</div>`;
  })
  document.getElementById("showSubcategory").innerHTML = `
  <b>This category contains these subcategories: </b> ${subcategories}
  `;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple>
  <option value="cat_1">Category 1</option>
  <option value="cat_2">Category 2</option>
  <option value="cat_3">Category 3</option>
  <option value="cat_4">Category 4</option>
</select>

<div id="showSubcategory"></div>

Thanks for the reply @Nidhin Joseph. Is there a way to show each selected category separately.... like I have described in my question? — Dev, Oct 28 '19 at 08:25

score 1 · Accepted Answer · answered Oct 28 '19 at 08:25

This function will give you your desired results. It uses Array.reduce on the options of the select to create a string which represents the category name and subcategories for each selected option:

$('select').on('change', function() {
  var subcategories = Object.values(this.options).reduce((c, v) => {
    if (v.selected) {
      switch (v.value) {
        case 'Category 1':
          subcategories = "Subcategory 1.1, Subcategory 1.2";
          break;
        case 'Category 2':
          subcategories = "Subcategory 2.1, Subcategory 2.2";
          break;
        case 'Category 3':
          subcategories = "Subcategory 3.1, Subcategory 3.2";
          break;
        case 'Category 4':
          subcategories = "Subcategory 4.1, Subcategory 4.2";
          break;
      }
      return c + v.value + ': ' + subcategories + '<br>';
    }
    return c;
  }, '');
  document.getElementById("showSubcategory").innerHTML = subcategories;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple>
  <option value="Category 1">Category 1</option>
  <option value="Category 2">Category 2</option>
  <option value="Category 3">Category 3</option>
  <option value="Category 4">Category 4</option>
</select>

<div id="showSubcategory"></div>

score 0 · Answer 3 · answered Oct 28 '19 at 08:27

$('select').on('change', function() {
  var collection = $(this)[0].selectedOptions;
  //console.log(collection);
  var subcategories = '';
  var str = "This category contains these subcategories: ";
  var result = str.bold();

  for (var i = 0; i < collection.length; i++) {
    //console.log(collection[i].label)
    switch (collection[i].label) {
      case 'Category 1':
        subcategories = "Subcategory 1.1, Subcategory 1.2";
        break;
      case 'Category 2':
        subcategories = "Subcategory 2.1, Subcategory 2.2";
        break;
      case 'Category 3':
        subcategories = "Subcategory 3.1, Subcategory 3.2";
        break;
      case 'Category 4':
        subcategories = "Subcategory 4.1, Subcategory 4.2";
        break;
    }

    result += subcategories;
  }

  document.getElementById("showSubcategory").innerHTML = result;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple>
  <option value="Category 1">Category 1</option>
  <option value="Category 2">Category 2</option>
  <option value="Category 3">Category 3</option>
  <option value="Category 4">Category 4</option>
</select>

<div id="showSubcategory"></div>

In your case, you can use selectedOptions to read the list of selected.

Yosvel Quintero · Answer 4 · 2019-10-28T08:52:44.653

You can do:

var subcategories = {
  'Category 1': 'Subcategory 1.1, Subcategory 1.2',
  'Category 2': 'Subcategory 2.1, Subcategory 2.2',
  'Category 3': 'Subcategory 3.1, Subcategory 3.2',
  'Category 4': 'Subcategory 4.1, Subcategory 4.2'
}

$('select').on('change', function() {
  $('#showSubcategoryUl').html('')
  $.each($(this).val(), function(i, v) {
    $('#showSubcategoryUl').append($('<li>').text(subcategories[v]))
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple>
  <option value="Category 1">Category 1</option>
  <option value="Category 2">Category 2</option>
  <option value="Category 3">Category 3</option>
  <option value="Category 4">Category 4</option>
</select>

<ul id="showSubcategoryUl"></ul>

Javascript: Get multiple values from a select input

4 Answers4