Question 362006 in CSS Question posted in
Some basic documentation can be found here.

Css – multiple custom select elements don't behave correctly

I created a custom select element on my page. I created a loop that goes through all of them and assigns the EventListeners needed. But for some reason, once I have more than one object, the event listeners are all assigned to the last object. I must be doing something wrong with the parameters.

loop through the objects and assign them the event listeners.

let customSelect = document.querySelectorAll(".custom-select");
for (let i = 0; i < 2; i++) {
  var selectBtn = customSelect[i].querySelector(".select-button");
  var selectedValue = document.querySelectorAll(".selected-value");
  var optionsList = customSelect[i].querySelectorAll(".select-dropdown li");

  // Toggle dropdown visibility when button is clicked
  selectBtn.addEventListener("click", function(event) {
    customSelect[i].classList.toggle("active");
  });

  // Handle option selection
  for (var x = 0; x < optionsList.length; x++) {
    //optionsList.forEach(function(option)  {
    optionsList[x].addEventListener("click", function(event) {
      var elm = "a" + i;
      alert(elm);
      document.getElementById(elm).textContent = this.textContent;
      customSelect[i].classList.remove("active");
    });
  }
}
.select-button {
  width: 100%;
  font-size: 1.15rem;
  background-color: #fff;
  padding: 0.675em 1em;
  border: 1px solid #caced1;
  border-radius: 0.25rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.selected-value {
  text-align: left;
}

.arrow {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #000;
  transition: transform ease-in-out 0.3s;
}

.select-dropdown {
  position: absolute;
  list-style: none;
  width: 100%;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  background-color: #fff;
  border: 1px solid #caced1;
  border-radius: 4px;
  padding: 10px;
  margin-top: 10px;
  max-height: 200px;
  overflow-y: auto;
  transition: 0.5s ease;
  transform: scaleY(0);
  opacity: 0;
  visibility: hidden;
}

.select-dropdown:focus-within {
  box-shadow: 0 10px 25px rgba(94, 108, 233, 0.6);
}

.select-dropdown li {
  position: relative;
  cursor: pointer;
  display: flex;
  gap: 1rem;
  align-items: center;
}

.select-dropdown li label {
  width: 100%;
  padding: 8px 10px;
  cursor: pointer;
}

.select-dropdown::-webkit-scrollbar {
  width: 7px;
}

.select-dropdown::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 25px;
}

.select-dropdown::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 25px;
}

.select-dropdown li:hover,
.select-dropdown input:checked~label {
  background-color: #f2f2f2;
}

.select-dropdown input:focus~label {
  background-color: #dfdfdf;
}

.select-dropdown input[type="radio"] {
  position: absolute;
  left: 0;
  opacity: 0;
}

.custom-select.active .arrow {
  transform: rotate(180deg);
}

.custom-select.active .select-dropdown {
  opacity: 1;
  visibility: visible;
  transform: scaleY(1);
}
<div id="newmatpe" class="custom-select">
  <button class="select-button">
      <span class="selected-value" id="a1"> habadaba</span>
      <span class="arrow"></span>
    </button>
  <ul class="select-dropdown">
    <li>
      <input type="radio" id="avka6" name="newmatpe" />
      <label for="avka6">shubi</label>
    </li>
    <li>
      <input type="radio" id="avka3" name="newmatpe" />
      <label for="avka3">dubi</label>
    </li>
    <li>
      <input type="radio" id="bcf3" name="newmatpe" />
      <label for="bcf3">Bubi</label>
    </li>
    <li>
      <input type="radio" id="bcf6" name="newmatpe" />
      <label for="bcf6">dubi</label>
    </li>
    <li>
      <input type="radio" id="fm200" name="newmatpe" />
      <label for="fm200">FM2</label>
    </li>
    <li>
      <input type="radio" id="meshulav" name="newmatpe" />
      <label for="meshulav">AM1</label>
    </li>
    <li>
      <input type="radio" id="avkomat6" name="newmatpe" />
      <label for="avkomat6">Really</label>
    </li>
    <li>
      <input type="radio" id="avkomat12" name="newmatpe" />
      <label for="avkomat12">cool</label>
    </li>
    <li>
      <input type="radio" id="other" name="newmatpe" />
      <label for="other">other</label>
    </li>
  </ul>
</div>


</br>
</br>

<div id="existingmatpe" class="custom-select">
  <button class="select-button">
      <span class="selected-value" id="a2">shlala</span>
      <span class="arrow"></span>
    </button>
  <ul class="select-dropdown">
    <li>
      <input type="radio" id="avka6" name="existingmatpe" />
      <label for="avka6">balala</label>
    </li>
    <li>
      <input type="radio" id="avka3" name="existingmatpe" />
      <label for="avka3">malala</label>
    </li>
    <li>
      <input type="radio" id="bcf3" name="existingmatpe" />
      <label for="bcf3">talala</label>
    </li>
    <li>
      <input type="radio" id="bcf6" name="existingmatpe" />
      <label for="bcf6">googoo</label>
    </li>
    <li>
      <input type="radio" id="fm200" name="existingmatpe" />
      <label for="fm200">gaga</label>
    </li>
    <li>
      <input type="radio" id="meshulav" name="existingmatpe" />
      <label for="meshulav">yalala</label>
    </li>
    <li>
      <input type="radio" id="avkomat6" name="existingmatpe" />
      <label for="avkomat6">malala</label>
    </li>
    <li>
      <input type="radio" id="avkomat12" name="existingmatpe" />
      <label for="avkomat12">sdsdsds</label>
    </li>
    <li>
      <input type="radio" id="other" name="existingmatpe" />
      <label for="other">other</label>
    </li>
  </ul>
</div>
Tags:

2

Answers


  1. 0

    You have duplicate id attributes in your code. That’s the issue.

    Login or Signup to reply.
  2. 0

    After the break, you copied/pasted the code from before the break. This ended up reusing the same id attributes for each of the elements. Remember: no two elements can have the same id, so this is most likely causing an issue. To have multiple elements that can be referred to using the same "name", try using a class.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search