jQuery/javascript add and remove classes on change

Question

I am trying to create an change event so when a user selects an option from a dropdown, the corresponding row in the table is highlighted (via adding a class).

I have tried two things.. jQuery and javascript.

Here is my jQuery:

$("#phoneType").change(function() {

    if (document.getElementById("optionSelect").value == 2) {
        var selectedStatus = parseInt(document.getElementById("optionSelect").value);

        $('.clickable-row').removeClass("cra-children-item-selected");
        $(this).addClass('cra-children-item-selected');

    }
});

Note that I am using javascript for the first two lines because I kept getting "val() is not a function" errors.

I tried using javascript to simply add/remove classes, but it doesn't seem to like my syntax...

        document.getElementsByClassName("clickable-row").className = "clickable-row";
        document.getElementById(selectedStatus).className = "clickable-row item-selected");

---

What I don't understand is why the jQuery isn't working... I have another function that works perfectly:

$(".clickable-row").click(function(event) {
    console.log($(this).attr('id'));

    $('.clickable-row').removeClass("item-selected");
    $(this).addClass('item-selected');

});

Why is the code above (on click) working, but not my on change function?

---

Here is HTML:

        <table class="table table-striped table-bordered">
            <tr>
                <th scope="col">Type</th>
                <th scope="col">Number</th>
            </tr>
                    <tr id="1" class="clickable-row">
                        <td>
                            Work
                        </td>
                        <td>
                            705-556-6677
                        </td>
                    </tr>


                    <tr id="6" class="clickable-row">
                        <td>
                            Cellular phone
                        </td>
                        <td>
                            613-444-7777
                        </td>
                    </tr>
        </table>
        <select name="phoneType" id="phoneType">
<option value="-1">Select</option>
<option value="3">Home</option>
<option value="1">Work</option>
<option value="6">Cellular phone</option>


 </select>

Answer 1

Check this, it's actually working.

$("#phoneType").change(function() {
  var val = $(this).val();
  $("tr").removeClass("selected");
  $("#tr" + val).addClass("selected");
    
})

.selected {border: solid 1px #000; background-color:blue;};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <table class="table table-striped table-bordered">
            <tr>
                <th scope="col">Type</th>
                <th scope="col">Number</th>
            </tr>
                    <tr id="tr1" class="clickable-row">
                        <td>
                            Work
                        </td>
                        <td>
                            705-556-6677
                        </td>
                    </tr>


                    <tr id="tr6" class="clickable-row">
                        <td>
                            Cellular phone
                        </td>
                        <td>
                            613-444-7777
                        </td>
                    </tr>
        </table>
        <select name="phoneType" id="phoneType">
<option value="-1">Select</option>
<option value="3">Home</option>
<option value="1">Work</option>
<option value="6">Cellular phone</option>


 </select>

Answer 2

I would highly recommend you don't try to use id="1" as your row IDs. Use HTML5 data attributes instead:

<tr class="clickable-row" data-id="6">

Then simple jQuery which will select the row:

$("#phoneType").change(function() {

    var id = parseInt($(this).val());
    var $row = $('.clickable-row[data-id="' + id + '"]');

    $('.clickable-row').removeClass("cra-children-item-selected");
    if (id > 0) {
        $row.addClass('cra-children-item-selected');
    }
});

Answer 3

Based on the HTML you presented, it seems the conditional is never true:

if (document.getElementById("optionSelect").value == 2) {

and should be rewritten referring to the select element for an option value that actually exists

$("#phoneType").change(function() {

    var t    = $(this),
        tVal = t.val();

    if (tVal === '3') {

        console.log(tVal);

    }

});