Add css style using Javascript when a select option is selected

Question

Is there a way to append a style to an existing class using Javascript, based on which option you have selected in an html select option drop down?

For example, in the below table, I would like the appropriate number the become bold or highlighted when that number has been selected from the option box.

Thanks so much!

<h2>Finder</h2>
<div class="step1">
  <p>Show category:</p>
</div>

<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>1</td>
      <td>Taylor</td>
      <td>Swift</td>
      <td>1234 5678</td>
      <td>taytay@gmail.com</td>
    </tr>
    <tr>
      <td>2, 3</td>
      <td>John</td>
      <td>Smith</td>
      <td>1234 5678</td>
      <td>johnnyboy@gmail.com</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Jane</td>
      <td>Doh</td>
      <td>1234 5678</td>
      <td>dohnut@gmail.com</td>
    </tr>
    <tr>
      <td>3, 4</td>
      <td>Taylor</td>
      <td>Doh</td>
      <td>1234 5678</td>
      <td>td@gmail.com</td>
    </tr>
  </tbody>
</table>

Does this answer your question? [How can I change an element's class with JavaScript?](https://stackoverflow.com/questions/195951/how-can-i-change-an-elements-class-with-javascript) — Michael C, Feb 19 '20 at 04:47

score 0 · Answer 1 · answered Feb 19 '20 at 07:03

You can do that with contains selector.

HTML

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

JQUERY

<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" );
});

waqas Mumtaz · Answer 2 · 2020-02-19T12:21:14.757

(function () {
    var previous;
    $("select[name=searchInput]").focus(function () {
        // Store the current value on focus, before it changes
        previous = this.value;
    }).change(function() {
      if(previous) {
      let element = $('#' + previous);
      element.removeClass("active");
      }
     
     let element = $('#' + this.value);
      element.addClass("active");
     
     previous = this.value;
    });
})();

.active{
color: white;
background: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Finder</h2>
<div class="step1">
  <p>Show category:</p>
</div>
<select type="search" name='searchInput' class="select-table-filter" data-table="order-table" id="searchInput">
  <option value="all">All</option>
  <option value="one">1</option>
  <option value="two">2</option>
  <option value="three">3</option>  
  <option value="four">4</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 id="one">
      <td>1</td>
      <td>Taylor</td>
      <td>Swift</td>
      <td>1234 5678</td>
      <td>taytay@gmail.com</td>
    </tr>
    <tr  id="two">
      <td>2, 3</td>
      <td>John</td>
      <td>Smith</td>
      <td>1234 5678</td>
      <td>johnnyboy@gmail.com</td>
    </tr>
    <tr id='three'>
      <td>3</td>
      <td>Jane</td>
      <td>Doh</td>
      <td>1234 5678</td>
      <td>dohnut@gmail.com</td>
    </tr>
    <tr  id='four'>
      <td>3, 4</td>
      <td>Taylor</td>
      <td>Doh</td>
      <td>1234 5678</td>
      <td>td@gmail.com</td>
    </tr>
  </tbody>
</table>

You can also use `class` if you want to change multiple rows on single select. for example: `class="one"` and in Jquery change `#` to `.` — waqas Mumtaz, Feb 19 '20 at 07:27

Add css style using Javascript when a select option is selected

2 Answers2