<div class="container">
  <div class="select">
    <div class="select-value">This is Select</div>
    <div class="select-dropdown">This is Select options</div>
  </div>

  <div class="select">
    <div class="select-value">This is Select</div>
    <div class="select-dropdown">This is Select options</div>
  </div>

  <div class="select">
    <div class="select-value">This is Select</div>
    <div class="select-dropdown">This is Select options</div>
  </div>
</div>

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1rem;
  padding: 1rem;
}

.select {
  width: 100%;
  border: 1px solid;
  position: relative;
}
.select-value {
  cursor: default;
}
.select-dropdown {
  width: 100%;
  position: absolute;
  left: 0;
  top: 100%;
  background: lime;
  height: 100px;
  border: 1px solid;
  padding: 1rem;
  box-sizing: border-box;
  display: none;
}
.select.open .select-dropdown {
  display: block;
}

const selects = document.querySelectorAll(".select");

document.addEventListener("click", (e) => {
  const target = e.target.closest(".select");
  document.querySelectorAll(".select").forEach((select) => {
    select.dispatchEvent(
      new CustomEvent("click:outside", {
        bubbles: true,
        detail: { target }
      })
    );
  });
});

selects.forEach((select) => {
  select.addEventListener("click", () => {
    select.classList.toggle("open");
  });

  select.addEventListener("click:outside", (e) => {
    if (e.target !== e.detail.target) {
      select.classList.remove("open");
    }
  });
});