Question 44393 in Html Question posted in
Some basic documentation can be found here.

Remove selected class from previous option in dropdown javascript – Html

I have both a dropdown select option and some buttons both containing the same values.

When I select an option from my dropdown I want the button with the same value to add a class of selected and when I select another option from my dropdown I want it to remove the class of selected from the previous selection and add it to the new value.

For now I’ve only managed to get it to show a class of selected but it won’t remove this class from the previous option once I’ve selected a new one, does anyone know how I go about doing this please?

I only want to use vanilla JS for this, no jQuery please.

code below:

const btn = document.querySelectorAll(".btn-num");
const dropDown = document.querySelector('#dropdown-container .dropdown');

dropDown.addEventListener("change", function(){
    btn.forEach(x => {
        if (x.getAttribute('data-value') == this.value) {
            x.classList.add('selected');
        }
    });
});
.btn-num.selected {
  background-color: green;
  color: #fff;
}
<div id="dropdown-container">    
    <select class="dropdown">       
        <option value="" selected="" disabled="">Numbers</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
</div>

<div class="options">
    <div class="btn-num" data-value="1">
        1
    </div>

    <div class="btn-num" data-value="2">
        2
    </div>

    <div class="btn-num" data-value="3">
        3
    </div>

    <div class="btn-num" data-value="4">
        4
    </div>
</div>
Tags:

5

Answers


  1. 0

    You forgot to remove class. Use x.classList.remove()

    const btn = document.querySelectorAll(".btn-num");
const dropDown = document.querySelector('#dropdown-container .dropdown');

dropDown.addEventListener("change", function() {
    btn.forEach(x => {
        x.classList.remove('selected'); 
        if (x.getAttribute('data-value') == this.value) {
            x.classList.add('selected'); 
        }
    });
});
    .btn-num.selected {
  background-color: green;
  color: #fff;
}
    <div id="dropdown-container">    
    <select class="dropdown">       
        <option value="" selected="" disabled="">Numbers</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
</div>

<div class="options">
    <div class="btn-num" data-value="1">
        1
    </div>

    <div class="btn-num" data-value="2">
        2
    </div>

    <div class="btn-num" data-value="3">
        3
    </div>

    <div class="btn-num" data-value="4">
        4
    </div>
</div>

    If you wanted to remove class only from the currently .selected item us can us ?. syntax is used to check if element .selected exists and remove the class only form the specific element
    :

    document.querySelector(".selected")?.classList.remove("selected")
    Login or Signup to reply.
  2. 0

    To remove the selected class you just need to add x.classList.remove('selected'); right before your conditional check.

    Login or Signup to reply.
  3. 0

    I’m not quite sure, but I think this piece of code could work, where the "selected" class is being removed from all buttons using x.classList.remove(‘selected’). Then adding "selected" class only to button whos ‘data-value’ attr. matches the newly selected option in the dropdown, using the ‘x.classList.add(‘selected’) instead of the remove, of course:

    const btn = document.querySelectorAll(".btn-num");
const dropDown = document.querySelector('#dropdown-container .dropdown');

dropDown.addEventListener("change", function(){
    btn.forEach(x => {
        x.classList.remove('selected');
        if (x.getAttribute('data-value') == this.value) {
            x.classList.add('selected');
        }
    });
});

    This should help you get the desired functionality where only one button has the "selected" class at any given time, and it corresponds to the currently selected option in the dropdown.

    Hope this helps! 🙂

    Login or Signup to reply.
  4. 0

    It’s fairly simple. Others explained it already. I wrote it slightly differently, but it doesn’t make a difference. It’s really just adding the classList.remove('selected') method. Maybe my version will help anyway.

    const dropDown = document.querySelector('.dropdown'),
      dropDownOptions = dropDown.querySelectorAll('option'),
      optionsContainer = document.querySelector('.options'),
      optionsDisplay = optionsContainer.querySelectorAll('.btn-num')
      
dropDown.addEventListener('change', (e) => {

  const selectedOption = e.target.value
  
  optionsDisplay.forEach(option => {
  
    option.classList.remove('selected')
    
    if (option.dataset.value === selectedOption)
      option.classList.add('selected')
  
  })

})
    main {
  padding: 2rem;
  display: grid;
  grid-auto-flow: row;
  gap: 2rem;
  font-family: monospace;
  font-weight: 900;
  font-size: 2rem;
}

#dropdown-container {
  background-color: hsl(156 75% 90%);
  padding: 1rem;
  border-radius: 1rem;
}

.options {
  background-color: hsl(287 75% 90%);
  padding: 1rem;
  border-radius: 1rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.btn-num {
  padding: 0.25rem 0.75rem;
  background-color: black;
  color: hsl(287 75% 90%);
  border-radius: 0.5rem;
}

.btn-num.selected {
  background-color: white;
  color: hsl(287 75% 50%);
  box-shadow: 0 0.125rem 1rem hsl(215 50% 15% / 0.15);
  text-shadow: 0 0.125rem 0.5rem hsl(215 50% 15% / 0.5)
}
    <main>

  <div id="dropdown-container">    
    <select class="dropdown">       
      <option value="" selected="" disabled="">Numbers</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
    </select>
  </div>

  <div class="options">
    <div class="btn-num" data-value="1">
      1
    </div>

    <div class="btn-num" data-value="2">
      2
    </div>

    <div class="btn-num" data-value="3">
      3
    </div>

    <div class="btn-num" data-value="4">
      4
    </div>
  </div>

</main>
    Login or Signup to reply.
  5. 0

    for shorter code use classList.toggle() method

    const 
  btns     = document.querySelectorAll(".btn-num")
, dropDown = document.querySelector('#dropdown-container .dropdown')
  ;
dropDown.addEventListener("change", function() { 
  btns.forEach( bt =>
    bt.classList.toggle('selected', bt.dataset.value===this.value ));
  });
    .btn-num.selected {
  background : green;
  color      : #fff;
  }
    <div id="dropdown-container">    
    <select class="dropdown">       
        <option value="" selected="" disabled="">Numbers</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
</div>

<div class="options">
  <div class="btn-num" data-value="1"> 1 </div>
  <div class="btn-num" data-value="2"> 2 </div>
  <div class="btn-num" data-value="3"> 3 </div>
  <div class="btn-num" data-value="4"> 4 </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search