Javascript：从 select 输入中获取多个值

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>

Answer 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>

Answer 2

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>

Answer 3

 $('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.

Answer 4

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>