选择选择选项时使用Javascript添加css样式

有没有一种方法可以根据您在html选择选项下拉列表中选择的选项，使用Javascript将样式附加到现有类中

例如，在下表中，当从选项框中选择相应的数字时，我希望相应的数字变为粗体或突出显示

非常感谢

发现者 节目类别：

全部的 1. 2. 3. 类别 名称 姓 电话 电子邮件 1. 泰勒 敏捷的 1234 5678 taytay@gmail.com 2, 3 约翰 史密斯 1234 5678 johnnyboy@gmail.com 3. 简 Doh 1234 5678 dohnut@gmail.com 3, 4 泰勒 Doh 1234 5678 td@gmail.com

---

您可以使用包含选择器来实现这一点

HTML

JQUERY

作用{ var-previous； $select[name=searchInput].focusfunction{ //在更改当前值之前，将其存储在焦点上 previous=此值； }.changefunction{ 如果以前{ 让元素=$+上一个； element.removeClassactive； } let element=$+this.value； element.addClassactive； previous=此值； }; }; .主动{ 颜色：白色； 背景：黑色； } 发现者 节目类别：

全部的 1. 2. 3. 4. 类别 名称 姓 电话 电子邮件 1. 泰勒 敏捷的 1234 5678 taytay@gmail.com 2, 3 约翰 史密斯 1234 5678 johnnyboy@gmail.com 3. 简 Doh 1234 5678 dohnut@gmail.com 3, 4 泰勒 Doh 1234 5678 td@gmail.com

---

这回答了你的问题吗？若要更改单选上的多行，也可以使用类。例如：class=1，在Jquery中更改为。

<select type="search" class="select-table-filter" data-table="order-table" id="searchInput">
   <option value="">All</option>
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
</select>

<input type="search" class="light-table-filter" data-table="order-table" placeholder="Search ..." />
<table class="order-table" id="myTable">
<thead>
 <tr class="header">
  <th>Category</th>
  <th>Name</th>
  <th>Last Name</th>
  <th>Phone</th>
  <th>Email</th>
</tr>
</thead>
<tbody>
<tr>
  <td class="td">1</td>
  <td>Taylor</td>
  <td>Swift</td>
  <td>1234 5678</td>
  <td>taytay@gmail.com</td>
</tr>
<tr>
  <td class="td">2, 3</td>
  <td>John</td>
  <td>Smith</td>
  <td>1234 5678</td>
  <td>johnnyboy@gmail.com</td>
</tr>
<tr>
  <td class="td">3</td>
  <td>Jane</td>
  <td>Doh</td>
  <td>1234 5678</td>
  <td>dohnut@gmail.com</td>
</tr>
<tr>
  <td class="td">3, 4</td>
  <td>Taylor</td>
  <td>Doh</td>
  <td>1234 5678</td>
  <td>td@gmail.com</td>
</tr>
</tbody>
</table>

<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>

$('#searchInput').on('change',function(){
    let val=$(this).val();
    $( ".td" ).css( "font-weight", "400" );
    $( ".td:contains('"+val+"') " ).css( "font-weight", "800" );
});