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

Question

我有一个 select 输入框，它允许我输入 select 多个值。 在这种情况下，我有 4 个类别，当我单击一个类别时，会出现子类别。 如您所见，它工作得很好。 唯一的问题是，当我 select 超过一个类别时，它仅显示第一个选定类别的子类别。 选择多个类别时，如何显示每个类别及其子类别？ 例如，如果我在类别 1、类别 2 和类别 3 上使用 select，我希望显示以下内容：

类别 1：子类别 1.1、子类别 1.2

类别 2：子类别 2.1、子类别 2.2

类别 3：子类别 3.1、子类别 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

而不是使用switch ，尝试通过迭代值数组将值分配给 object 然后 append 。

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

这个 function 会给你你想要的结果。 它在 select 的选项上使用Array.reduce来创建一个字符串，该字符串表示每个选定选项的类别名称和子类别：

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

在您的情况下，您可以使用selectedOptions来读取选定列表。

Answer 4

你可以做：

 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>