Javascript 如何基于另一个下拉列表值选择多个动态填充的下拉列表

如何根据另一个下拉列表值选择动态填充的下拉列表

我在页面上有两个下拉列表。第一个实例的第二个下拉列表将为空。当您在第一个下拉列表中选择值时，基于该值，第二个下拉列表将可用。现在我想要第二个下拉菜单作为多选菜单

var-mealsByCategory={
答：[“汤”、“汁”、“茶”、“其他”]，
B:[“汤”、“汁”、“水”、“其他”]，
C:[“汤”、“汁”、“咖啡”、“茶”、“其他”]
}
功能更改CAT（值）{
if（value.length==0）document.getElementById（“category”）.innerHTML=“”；
否则{
var-catOptions=“”；
对于（mealsByCategory[值]中的categoryId）{
catOptions+=“”+mealsByCategory[value][categoryId]+“”；
}
document.getElementById（“category”）.innerHTML=catOptions；
}
}

挑选
A.
B
C
挑选

您可以使用提供此功能的jquery插件，而不是自己开发：

如果您想直接使用JavaScript，您只需将第二个

选择更改为多选（例如
），然后捕获所选值

但是，为了使其更易于维护，以及包括复选框方法，您可以创建自己的方法来进行日常设置（有很多方法可以实现）。让我们来看一看：


var-mealsByCategory={
答：[“汤”、“汁”、“茶”、“其他”]，
B:[“汤”、“汁”、“水”、“其他”]，
C:[“汤”、“汁”、“咖啡”、“茶”、“其他”]
};
功能更改CAT（值）{
if（value.length==0）document.getElementById（“category”）.innerHTML=“”；
否则{
var-catOptions=“”；
对于（mealsByCategory[值]中的categoryId）{
var类别=mealsByCategory[价值][类别ID]；
catOptions+=“”
+类别+“”；
}
document.getElementById（“复选框”）.innerHTML=catOptions；
}
}
var=false；
函数显示复选框（）{
var复选框=document.getElementById（“复选框”）；
如果（！展开）{
复选框.style.display=“block”；
扩展=真；
}否则{
复选框.style.display=“无”；
扩展=假；
}
}
函数checkOptions（）{
els=document.getElementsByName（'categories'）；
var selectedChecks=“”，qtChecks=0；
对于（i=0；i0）选择了CHECKS+=“，”
selectedChecks+=els[i]。值；
qtChecks++；
}
}
如果（selectedChecks！=“”）{
document.getElementById（“defaultCategory”）.innerText=selectedChecks；
}否则{
document.getElementById（“defaultCategory”）.innerText=“选择一个选项”；
}
}
div.multiselect，选择#用餐，按钮{
保证金：5px；
}
.多选{
宽度：200px；
}
.选择框{
位置：相对位置；
}
.选择框选择{
宽度：100%；
字体大小：粗体；
}
.多选{
位置：绝对位置；
左：0；
右：0；
排名：0；
底部：0；
}
#复选框{
显示：无；
边框：1px#dadada实心；
}
#复选框标签{
显示：块；
}
#复选框标签：悬停{
背景色：#1e90ff；
}

挑选
A.
B
C
选择一个选项
感谢您的回复…但我想第二个下拉列表应该是multiselect…如何在填充数据后使用复选框多选下拉列表值感谢您宝贵的回答…工作正常..但我不想直接在顶部显示check options按钮..应选择多少个或选定的名称显示..非常感谢“直接显示在顶部”是什么意思？进入页面顶部的
div
，或者作为select的文本（我的意思是，不是“选择一个选项”）？我的意思是在“选择一个选项”的地方，很简单：只要添加一个
onClick
，在每次选中（或取消选中）选项时调用函数，然后循环复选框查找选中的选项，连接文本并将其显示在select的主标签上。如果要显示所选项目的数量，也可以执行相同的操作。代码现在已经针对它进行了调整。