Javascript 如何在“多选”中选择其余图元

我有一个多选html字段，其中包括类别和与这些类别相关的元素

我希望一个人能够选择单独的课程，或者如果他们选择了一个类别（值前缀为cat_），那么应该将以下课程标记为选中，直到找到下一个类别

我试过几件事，但没有成功

$（文档）.ready（函数（）{
$（“#课程”）。更改（函数（）{
$（this）.nextUntil（'option[name^=“cat_”]”）。each（）.prop（“selected”，“selected”）；
$（this）.nextUntil（'option[name^=“cat_”]”）prop（“selected”，“selected”）；
$（this）.closest（“option”）.nextAll（）.each（function（））{
$this.prop（“选定”、“选定”）；
});
});
});

数据/
数据/吉他
数据/键盘
强制性/
fb/
fb/Node-js
fb/PHP编程
fb/C#
您可以检查所选选项
是否使用
cat_uuu>关键字启动，如果是，您可以将所有
nextUntil（'option[value^=“cat_uuu]”）选项的
所选属性设置为true


函数选择（元素，回调）{
元素。查找（'option'）。打开（'click'，函数（事件）{
所选常量=$（此）；
if（selected.val（）.startsWith（'cat_'））{
挑选出来的
.nextUntil（'option[value^=“cat_”]”）
.prop（'selected'，true）
}
回调（element.val（））
})
}
选择（$（“#课程”），值=>{
console.log（值）
})
选择{
高度：250px；
}

数据/
数据/吉他
数据/键盘
强制性/
fb/
fb/Node-js
fb/PHP编程
fb/C#
您可以递归地在同级中移动，检查它们是新类别还是当前类别的一部分。下面的例子

**注意：**这适用于多个选择。您还需要将此逻辑反转为取消选择


let select=document.getElementsByClassName（'form-control'）[0]；
函数检查同级（同级）{
if（同级&&！同级.value.includes（'cat'））{
sibling.selected=true；
checkSibling（sibling.nextElementSibling）；
}
}
select.addEventListener（'click'，函数（事件）{
checkSibling（event.target.nextlementsibling）；
});

数据/
数据/吉他
数据/键盘
强制性/
fb/
fb/Node-js
fb/PHP编程
fb/C#
您可以这样尝试（必须感谢）--


$（文档）.ready（函数（）{
$（'[value^=“cat_”]'）。单击（函数（）{
$（this）.nextUntil（'[value^=“cat_”]'）.prop（“选定的”，“选定的”）；
});
});

数据/
数据/吉他
数据/键盘
强制性/
fb/
fb/Node-js
fb/PHP编程
fb/C#
您有重复的
value=“2”
-这是故意的吗？
nextUntil
查找兄弟姐妹
$（此）
指的是select元素，没有一个选项是该元素的同级项。@connexo它只是虚拟数据来实现此功能-我将编辑问题您缺少
的参数。each（）
，您希望它做什么？如果您单击吉他，然后按住shift键并单击
fb
，它不会选择整个
fb
类别。这是因为
selected.val（）。必须获取最后选择的选项。现在，如果单击
PHP
，然后按住shift键并单击
data
，则会失败。问题是，您没有测试他们刚刚单击的选项，您只是测试第一个或最后一个选择的选项。@Barmar我想单击是正确的选择。如果您单击第一个类别“数据”，它将不会选择以下项目您只需使用
if（sibling&&！sibling.value.includes（'cat'））即可修复错误。