Jquery 如何让用户仅从下拉菜单中选择一个选项？

在我们的网站上，我们有一个带有嵌套过滤器的选项卡，“过滤器1”是第一级，过滤器1有许多子级，我的任务是让用户从所有嵌套的选择选项中只选择一个选项。因此，在单击事件时，我添加了类“selected”，假设用户单击了id=2的选项，但是如果用户单击了id=4的选项，我需要删除id=2中选择的类

如果它在一个分支下，我可以使用jquery的siblings（）来检查其他元素是否有“selected”类，但是我如何使用嵌套的下拉菜单来检查父元素的同级子元素中的“selected”类呢

<details class="block filter">
  <summary>Fitler 1</summary> 
  <ul> 
    <details>
    <ul>
      <summary>Nested level 2.1</summary>
      <ul>
       <li id="1"></li>
       <li id="2"></li>
       <li id="3"></li>
      </ul>
    </ul>
    </details>
    <details>
    <ul>
      <summary>Nested level 2.2</summary>
      <ul>
       <li id="4"></li>
       <li id="5"></li>
       <li id="6"></li>
      </ul>
    </ul>
    </details>
    <details>
    <ul>
      <summary>Nested level 2.3</summary>
      <ul>
       <li id="7"></li>
       <li id="8"></li>
       <li id="9"></li>
      </ul>
    </ul>
    </details>
    ...
  </ul>

</details>

菲特勒1


嵌套级别2.1







嵌套级别2.2







嵌套级别2.3






...

如果它们有公共类或名称，或者即使它们是唯一的选择元素：

首先，捕获单击事件（我在所有选择上都使用了

.class common

，但您可以使用

name=[blablabla]

甚至

select

：

$(document).on('click', '.class-common-on-all-your-selects', function(){
 $('.class-common-on-all-your-selects').prop("selected", false)
 $(this).prop("selected", true)
})

在内部，取消选择具有指定类的所有元素，然后将单击的选项标记为选中。

if（$（（$ul>li.selected”）.length）

这是为了检查在任何

ul