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>

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
– jcubic, Commented Oct 28, 2019 at 8:15
Possible duplicate of How to get multiple select box values using jquery? — user5734311
– user5734311, Commented Oct 28, 2019 at 8:17

Nick · Accepted Answer · 2019-10-28 08:25:46Z

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>

Nidhin Joseph · Accepted Answer · 2019-10-28 08:29:09Z

1

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>

edited Oct 28, 2019 at 8:29

answered Oct 28, 2019 at 8:16

Nidhin Joseph

10.3k4 gold badges28 silver badges49 bronze badges

1 Comment

Dev Over a year ago

Thanks for the reply @Nidhin Joseph. Is there a way to show each selected category separately.... like I have described in my question?

sugars · Accepted Answer · 2019-10-28 08:27:29Z

$('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 · Accepted Answer · 2019-10-28 08:52:44Z

0

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>

edited Oct 28, 2019 at 8:52

answered Oct 28, 2019 at 8:29

Yosvel Quintero

19.1k5 gold badges39 silver badges47 bronze badges

Collectives™ on Stack Overflow

Javascript: Get multiple values from a select input

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related