javascript - jQuery/javascript 在更改时添加和删除类

Question

我正在尝试创建一个更改事件，以便当用户从下拉列表中选择一个选项时，表中的相应行将突出显示(通过添加类)。

我尝试了两件事.. jQuery 和 javascript。

这是我的 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');

    }
});

请注意，我在前两行中使用了 javascript，因为我不断收到“val() 不是函数”错误。

我尝试使用 javascript 来简单地添加/删除类，但它似乎不喜欢我的语法...

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

<小时/>

我不明白的是为什么 jQuery 不起作用...我有另一个可以完美工作的函数:

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

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

});

为什么上面的代码(点击时)可以工作，但我的更改功能却不起作用？

<小时/>

这是 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

检查一下，它确实有效。

$("#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>