Cannot add or change class in select options with javascript classList

Question

I'm using admin lte 3 bootstrap 4. I want to add/change class of select option input (dropdownlist) with javascript classList. Background and validation color of dropdownlist will change depents on selected option, using add or change the class.

if I select Person 2, the background color become green (bg-success). The class works great when I change it manually with hardcode or in inspect element browser. But the script cant add/change the class when onchange select. Script work great in input type text, i have using them for input text validation. I don't know why not working in select option.

function changeclass($value) {
  var element = document.getElementById(event.target.id);
  console.log($value); //works great, return value of option
  console.log(event.target.id); //works great, return element id = person
  if ($value == 1) {
    if (element.classList.contains("bg-success") == true) element.classList.replace("bg-success", "bg-warning");
    if (element.classList.contains("bg-danger") == true) element.classList.replace("bg-danger", "bg-warning");
    if (element.classList.contains("bg-warning") == true) element.classList.replace("bg-warning", "bg-warning");
    if (element.classList.contains("bg-warning") == false) element.classList.add("bg-warning");
    console.log(element.classList.contains("bg-success")); //works great, return false because no class bg-successin select class
    console.log(element.classList.contains("color-pallete")); //works great, return true
  }
  if ($value == 2) {
    if (element.classList.contains("bg-success") == true) element.classList.replace("bg-success", "bg-success");
    if (element.classList.contains("bg-danger") == true) element.classList.replace("bg-danger", "bg-success");
    if (element.classList.contains("bg-warning") == true) element.classList.replace("bg-warning", "bg-success");
    if (element.classList.contains("bg-success") == false) element.classList.add("bg-success");
  }
  //.... until 4

  if (element.classList.contains("is-valid") == false) element.classList.add("is-valid");

}

.bg-warning {
    background-color: #ffc107 !important;
}

.bg-success {
    background-color: #28a745 !important;
}

<select id="person" class="form-control color-pallete" onchange="changeclass(value);">
  <option value='1'>person 1</option>
  <option value='2'>person 2</option>
  <option value='3'>person 3</option>
  <option value='4'>person 4</option>
</select>

Any suggestions? thank you :)

Answer 1

This is the sort of thing that I would do:

function changeclass($value, $list) {
  var element = $list;
  // Remove all classes
  element.classList.remove("bg-warning");
  element.classList.remove("bg-success");
  element.classList.remove("bg-danger");
  element.classList.remove("bg-normal");
  // Now add on the class based on the selection
  if ($value == 1) {
    element.classList.add("bg-warning");
  } else if ($value == 2) {
    element.classList.add("bg-success");
  } else if ($value == 3) {
    element.classList.add("bg-danger");
  } else {
    element.classList.add("bg-normal");
  }
  // Not sure what these are for as there is no css classes called "is-valid" or "color-pallete"!
  //if (element.classList.contains("is-valid") == false) element.classList.add("is-valid");
  //console.log(element.classList.contains("color-pallete")); //works great, return true
}

.bg-warning {
    background-color: #ffc107 !important;
}

.bg-success {
    background-color: #28a745 !important;
}

.bg-danger {
  background-color: red !important;
}

.bg-normal {
  background-color: white !important;
}

<select id="person" class="form-control color-pallete" onchange="changeclass(value, this);">
  <option value='0'>--Select--</option>
  <option value='1'>Warning</option>
  <option value='2'>Success</option>
  <option value='3'>Danger</option>
  <option value='4'>Normal</option>
</select>

I don't have event handlers, so the event.target.id won't work for me. Instead, I've updated the onchange function to pass this which is a reference to the element itself. There are some lines that I haven't got styles for so can't test what would happen there.

The idea is that, rather than check whether or not a classList contains a class, simply remove() them all (you won't break anything if the class name is not there) and then just add() the right class based on the selection. I've included classes for all four options just to show that it is working.