Как разрешить пользователю выбирать только один вариант из выпадающего меню?

Question

На нашем сайте у нас есть вкладка с вложенными фильтрами. «Фильтр 1» - это первый уровень, а фильтр 1 имеет несколько подуровней, и моя задача - позволить пользователю выбрать только один вариант из всех вложенных вариантов выбора. , Итак, к событию click я добавляю класс «selected», скажем, опцию «нажал пользователь» с id = 2, но если пользователь щелкает опцию с id = 4, мне нужно удалить класс, выбранный из id = 2.

Если бы он находился под одной веткой, я мог бы использовать sibilings () jquery, чтобы проверить, есть ли у какого-либо другого элемента класс «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>

Answer 1

Хорошо, если у них есть общие классы или имена, или даже если они являются единственными элементами выбора:

Во-первых, запишите событие щелчка (я использовал .class-common-on-all-your-selects, но вы могли бы использовать name=[blabla]или даже select:

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

Внутри вас отмените выбор всех элементов с указанным классом, после чего вы отметите выбранный параметр как выбранный.