Скрыть список по клику вне его

[lev90]

Добрый вечер!

Я новичок в javascript. Есть рабочий скрипт выпадающих списков. Всем хорош, кроме того, что не закрывает предыдущий список, после клика по соседнему или клика вне списков.
Подскажите пожалуйста, как можно сюда добавить закрытие списков по клику вне списка или по следующему списку.

Заранее всем спасибо!

const selectedAll = document.querySelectorAll(".selected");

selectedAll.forEach(selected => {
const optionsContainer = selected.previousElementSibling;
const optionsList = optionsContainer.querySelectorAll(".option");

 selected.addEventListener("click", () => {
   if (optionsContainer.classList.contains("active")) {
       optionsContainer.classList.remove("active");
        } else {
      let currentActive = document.querySelector("options-container.active");

 if (currentActive) {
    currentActive.classList.remove("active");
   }
    optionsContainer.classList.add("active");
   }
})

   optionsList.forEach(o => {
     o.addEventListener("click", () => {
       selected.innerHTML = o.querySelector("label").innerHTML;
       optionsContainer.classList.remove("active");
     });
   });
})

<div class="select-box">
   <div class="options-container">
      <div class="option">
         <label for="automobiles2" class="button_cost">
              <input type="radio" class="radio" value="" id="automobiles2" name="category2" />
               All</label>
      </div>

      <div class="option">
         <label for="film2" class="button_cost">
            <input type="radio" class="radio" value=".iii" id="film2" name="category2" /> 
             Film Animation</label>
      </div>

      <div class="option">
         <label for="science2" class="button_cost">
            <input type="radio" class="radio" value=".uuu" id="science2" name="category2" />
             Science Technology</label>
      </div>

   <div class="selected">
      Select Video Category
   </div>
</div>

.select-box {
  position: relative;
  display: flex;
  width: 400px;
  flex-direction: column;
}

.select-box .options-container {
  background: #2f3640;
  color: #f5f6fa;
  max-height: 0;
  width: 100%;
  opacity: 0;
  transition: all 0.4s;
  border-radius: 8px;
  overflow: hidden;

  order: 1;

  position: absolute;
  z-index: 100;
}

.selected {
  background: #2f3640;
  border-radius: 8px;
  margin-bottom: 8px;
  color: #f5f6fa;
  position: relative;

  order: 0;
}

.selected::after {
  content: "";
  background: url("img/arrow-down.svg");
  background-size: contain;
  background-repeat: no-repeat;

  position: absolute;
  height: 100%;
  width: 32px;
  right: 10px;
  top: 5px;

  transition: all 0.4s;
}

.select-box .options-container.active {
  max-height: 240px;
  opacity: 1;
  overflow-y: scroll;
  margin-top: 104px;
}

.select-box .options-container.active + .selected::after {
  transform: rotateX(180deg);
  top: -6px;
}

.select-box .options-container::-webkit-scrollbar {
  width: 8px;
  background: #0d141f;
  border-radius: 0 8px 8px 0;
}

.select-box .options-container::-webkit-scrollbar-thumb {
  background: #525861;
  border-radius: 0 8px 8px 0;
}

.select-box .option,
.selected {
  padding: 12px 24px;
  cursor: pointer;
}

.select-box .option:hover {
  background: #414b57;
}

.select-box label {
  cursor: pointer;
}

.select-box .option .radio {
  display: none;
}

/* Searchbox */

.search-box input {
  width: 100%;
  padding: 12px 16px;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  position: absolute;
  border-radius: 8px 8px 0 0;
  z-index: 100;
  border: 8px solid #2f3640;

  opacity: 0;
  pointer-events: none;
  transition: all 0.4s;
}

.search-box input:focus {
  outline: none;
}

.select-box .options-container.active ~ .search-box input {
  opacity: 1;
  pointer-events: auto;
}

[рони]

lev90,
темы плодить зачем?

[рони]

lev90,
сделайте макет целиком с css, js, html.

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

[рони]

lev90,
форум - поиск - кастомизация
https://javascript.ru/forum/misc/666...tml#post439228

https://javascript.ru/forum/misc/590...tml#post393087

[lev90]

Понял как закрыть список по клику вне списка.
Осталось понять как закрыть предыдущий открытый список.

document.addEventListener('click', function(e) {
   if (e.target !== optionsContainer) {
      optionsContainer.classList.remove("active");
   }
})

[рони]

lev90,

[lev90]

Подскажите пожалуйста, как добавить кнопку сброса, чтобы привести списки к первоначальному состоянию.

[рони]

сделайте макет целиком с css, js, html.

[lev90]

Мне необходимо добавить кнопку "Сброс", для сброса значений всех радиокнопок и показать исходные значения <div class="selected"> All ...</div> или значения первых label списков.

.select-box {
         display: flex;
         width: 100%;
         flex-direction: column;
      }

      .select-box .options-container {
         background: #2f3640;
         color: #f5f6fa;
         opacity: 0;
         transition: all 0.4s;
         border-radius: 8px;
         overflow: hidden;
         order: 1;
         position: absolute;
         top: 70px;
         max-height: 0;
      }

      .selected {
         background: #2f3640;
         border-radius: 8px;
         color: #f5f6fa;
         position: relative;
         order: 0;
         text-overflow: ellipsis;
         overflow: hidden;
         white-space: nowrap;
         width: 250px;
      }

      .selected::after {
         content: "";
         background: url("/img/arrow-down.svg");
         background-size: contain;
         background-repeat: no-repeat;
         position: absolute;
         height: 100%;
         width: 32px;
         right: 10px;
         top: 5px;
         transition: all 0.4s;
      }

      .select-box .options-container.active {
         max-height: 500px;
         opacity: 1;
         overflow-y: scroll;
         z-index: 1;
      }

      .select-box .options-container.active+.selected::after {
         transform: rotateX(180deg);
         top: -6px;
      }

      .select-box .options-container::-webkit-scrollbar {
         width: 8px;
         background: #0d141f;
         border-radius: 0 8px 8px 0;
      }

      .select-box .options-container::-webkit-scrollbar-thumb {
         background: #525861;
         border-radius: 0 8px 8px 0;
      }

      .select-box .option,
      .selected {
         padding: 5px 10px;
         cursor: pointer;
      }

      .select-box .option:hover {
         background: #414b57;
      }

      .select-box label {
         cursor: pointer;
      }

      .select-box .option .radio {
         color: #525861;
      }

      .button_cost {
         position: relative;
         display: inline-block;
         font-size: 90%;
         font-weight: 700;
         color: rgb(209, 209, 217);
         text-decoration: none;
         text-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
         padding: 0.5em 1em;
         outline: none;
         border-radius: 3px;
         background: linear-gradient(rgb(220, 207, 113), rgb(194, 174, 48)) rgb(220, 207, 113);
         box-shadow: 0 1px rgba(255, 255, 255, 0.2) inset, 0 3px 5px rgba(0, 1, 6, 0.5), 0 0 1px 1px rgba(0, 1, 6, 0.2);
         transition: 0.2s ease-in-out;
         cursor: pointer;
         width: 100%;
      }

      .button_cost:active {
         top: 1px;
         box-shadow: 0 0 1px rgba(0, 0, 0, 0.5) inset, 0 2px 3px rgba(0, 0, 0, 0.5) inset, 0 1px 1px rgba(255, 255, 255, 0.1);
      }

      .button_cost input {
         cursor: pointer;
         position: absolute;
         opacity: 0;
         display: block;
         height: 0;
         width: 0;
      }

<form>
<button type="reset" class="reset">Сброс</button>

      <div class="select-box">
         <div class="options-container">
            <div class="option">
               <label for="all" class="button_cost">
                  <input type="radio" class="radio" value="" id="all" name="val1" /> All 1</label>
            </div>

            <div class="option">
               <label for="film" class="button_cost">
                  <input type="radio" class="radio" value=".pink" id="film" name="category2" /> Film</label>
            </div>

            <div class="option">
               <label for="science" class="button_cost">
                  <input type="radio" class="radio" value=".blue" id="science" name="category" /> Technology</label>
            </div>
         </div>
         <div class="selected"> All 1 </div>
      </div>

      <br><br><br><br><br><br><br><br>

      <div class="select-box">
         <div class="options-container">
            <div class="option">
               <label for="all2" class="button_cost">
                  <input type="radio" class="radio" value="" id="all2" name="val2" /> All 2</label>
            </div>

            <div class="option">
               <label for="film2" class="button_cost">
                  <input type="radio" class="radio" value=".iii" id="film2" name="category2" /> Animation</label>
            </div>

            <div class="option">
               <label for="science2" class="button_cost">
                  <input type="radio" class="radio" value=".uuu" id="science2" name="category2" /> Science
                  Technology</label>
            </div>
         </div>
         <div class="selected"> All 2</div>
      </div>
   </form>

const selectedAll = document.querySelectorAll(".selected");

      selectedAll.forEach(selected => {
         const optionsContainer = selected.previousElementSibling;
         const optionsList = optionsContainer.querySelectorAll(".option");

         selected.addEventListener("click", (e) => {
            e.stopPropagation();
            if (optionsContainer.classList.contains("active")) {
               optionsContainer.classList.remove("active");
            } else {
               let currentActive = document.querySelector(".options-container.active");
               if (currentActive) {
                  currentActive.classList.remove("active");
               }
               optionsContainer.classList.add("active");
            }
            if (optionsContainer.classList.contains("active")) {
            }
         });

         document.addEventListener('click', function (e) {
            if (e.target !== optionsContainer) {
               optionsContainer.classList.remove("active");
            }
         })
         optionsList.forEach(o => {
            o.addEventListener("click", () => {
               selected.innerHTML = o.querySelector("label").innerHTML;
               optionsContainer.classList.remove("active");
            });
         });
      });

[рони]

lev90,

document.querySelector('.reset').addEventListener("click", () => {
document.querySelectorAll(".option:first-child").forEach(o => o.click());
})