Remove selected class from previous option in dropdown javascript - Html

kdsla123
March 7, 2023
158 views
2 votes
5 Answers

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>

Answers

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")

- HiKaylum
- March 7, 2023 at 4:33 pm
- 0 votes
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.

- flisus
- March 7, 2023 at 4:34 pm
- 0 votes
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.

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>

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>

Please signup or login to give your own answer.

Click here to cancel reply.

Remove selected class from previous option in dropdown javascript – Html

Answers