jQuery/javascript add and remove classes on change
<p>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).</p>

<p>I have tried two things.. jQuery and javascript.</p>

<p>Here is my jQuery:</p>

<pre><code>$("#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');

    }
});
</code></pre>

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

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

<pre><code>        document.getElementsByClassName("clickable-row").className = "clickable-row";
        document.getElementById(selectedStatus).className = "clickable-row item-selected");
</code></pre>

<hr>

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

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

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

});
</code></pre>

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

<hr>

<p>Here is HTML:</p>

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


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


 &lt;/select&gt;
</code></pre>