Javascript：从选择输入中获取多个值

我有一个选择输入框，允许我选择多个值。在本例中，我有4个类别，当我单击一个类别时，会显示子类别。正如你所看到的，它工作得很好。唯一的问题是，当我选择多个类别时，它只显示第一个选定类别的子类别。当选择多个类别时，如何显示每个类别以及子类别？例如，如果我在类别1、类别2和类别3上选择，我希望显示以下内容：

第1类：第1.1子类、第1.2子类

第2类：第2.1子类、第2.2子类

第3类：第3.1子类、第3.2子类

$（'select'）。在（'change'，函数（）{
var子类别=“”；
var str=“该类别包含以下子类别：”；
var result=str.bold（）；
开关（此值）{
“第1类”案件：
子类别=“子类别1.1，子类别1.2”；
打破
“第2类”案件：
子类别=“子类别2.1，子类别2.2”；
打破
“第3类”案件：
子类别=“子类别3.1，子类别3.2”；
打破
“第4类”案件：
子类别=“子类别4.1，子类别4.2”；
打破
}
document.getElementById（“showSubcategory”）.innerHTML=结果+子类别；
});

第一类
第2类
第3类
第4类
不要使用
开关
，尝试将值分配给对象，然后通过迭代值数组进行追加


$（'select'）。在（'change'，function（）上{
var子类别=“”；
设val={
类别1：“子类别1.1，子类别1.2”，
第2类：“第2.1子类，第2.2子类”，
类别3：“子类别3.1，子类别3.2”，
类别4：“子类别4.1，子类别4.2”
};
$（this.val（）.forEach（（v，i）=>{
子类别+=`类别${i+1}-${val[v]}`；
})
document.getElementById（“showSubcategory”）.innerHTML=`
此类别包含以下子类别：${subcategories}
`;
});

第一类
第2类
第3类
第4类
此功能将为您提供所需的结果。它使用select选项上的
数组。reduce
创建一个字符串，表示每个选定选项的类别名称和子类别：


$（'select'）。在（'change'，function（）上{
var子类别=Object.values（this.options）.reduce（（c，v）=>{
如果（v.选定）{
开关（v值）{
“第1类”案件：
子类别=“子类别1.1，子类别1.2”；
打破
“第2类”案件：
子类别=“子类别2.1，子类别2.2”；
打破
“第3类”案件：
子类别=“子类别3.1，子类别3.2”；
打破
“第4类”案件：
子类别=“子类别4.1，子类别4.2”；
打破
}
返回c+v.value+'：'+子类别+'
'；
}
返回c；
}, '');
document.getElementById（“showSubcategory”）.innerHTML=子类别；
});

第一类
第2类
第3类
第4类

$（'select'）。在（'change'，function（）上{
变量集合=$（此）[0]。选择选项；
//控制台日志（收集）；
var子类别=“”；
var str=“该类别包含以下子类别：”；
var result=str.bold（）；
对于（变量i=0；i

第一类
第2类
第3类
第4类
您可以执行以下操作：


var子类别={
“1类”：“1.1子类，1.2子类”，
“第2类”：“第2.1子类，第2.2子类”，
“第3类”：“第3.1子类，第3.2子类”，
“第4类”：“第4.1子类，第4.2子类”
}
$（'select'）。在（'change'，function（）上{
$（'#showsubcategory'）.html（''）
$.each（$（this）.val（），函数（i，v）{
$（'#showsubcategory'）。追加（$（'
）。文本（子类别[v]））
})
})

第一类
第2类
第3类
第4类
获取并迭代它。正如@ChrisG建议的那样，您可以使用
数组.from（this.selectedOptions）.map（函数（x）{return x.value；}）以获取值列表。您可以使用ES6
[…this.selectedOptions].map（x=>x.value）
来缩短这个时间。感谢您的回复@Nidhin Joseph，这可能是重复的。是否有办法分别显示每个选定类别。。。。就像我在问题中描述的那样？@Dev不用担心-很高兴我能帮上忙。我想你得到了很多好答案。。。