使用JQuery选择下拉值时，类未更改

Question

What I am trying to accomplish is that when a user selects a value from a dropdown box the corresponding row will change to a different color depending on the option selected.

So far I have the rows changing colors just fine but if the user changes their mind and wants to select a new option the row sometimes doesnt change colors. The change is sporadic and sometimes the color will change again sometimes it will not.

Simplified HTML table:

<table class="table" id="myTable">
    <tbody>
    <tr>
      <td>1.</td>
      <td>
        <select name="queue" class="queue-drop">
          <option></option>
          <option class="move">Move</option>
          <option class="add">Add</option>
          <option class="change">Change</option>
          <option class="cancel">Cancel</option>
          <option class="swap">Swap</option>
        </select>
      </td>
    </tr>
    <tr>
    <td>2.</td>
      <td>
        <select name="queue" class="queue-drop">
          <option></option>
          <option class="move">Move</option>
          <option class="add">Add</option>
          <option class="change">Change</option>
          <option class="cancel">Cancel</option>
          <option class="swap">Swap</option>
        </select>
      </td>
    </tr>
    </tbody>
  </table>

JQuery:

$(document).ready(function(){
$('.queue-drop').change(function(){
  var selectedVal = $(this).find("option:selected").text();
  if (selectedVal == 'Move') {
    $(this).closest('tr').addClass("move-row")
  }
  else if (selectedVal == "Add") {
    $(this).closest('tr').addClass("add-row")
  }
  else if (selectedVal == "Cancel") {
    $(this).closest('tr').addClass("cancel-row")
  }
  else if (selectedVal == "Change") {
    $(this).closest('tr').addClass('change-row')
  }
  else if (selectedVal == "Swap") {
    $(this).closest('tr').addClass('swap-row')
  }

});

});

JS Fiddle: http://jsfiddle.net/exx2q/

I am somewhat new to JS and JQuery any help would be appreciated.

Answer 1

You can use .removeClass() , to clear class and then apply the new one

 $(this).closest('tr').removeClass().addClass("move-row")

DEMO