Question

Hopefully this isn’t a repeat question, but if it is, just post the link as your response.

I need to create a website with a select dropdown as the top with a few options, and several divs below with several links in them.

Depending on which option you select in the selectbox, the links that are labeled appropriately will get highlighted.

Here’s the basic structure:

<select>
  <option value="o1">Option 1</option>
  <option value="o2">Option 2</option>
  <option value="o3">Option 3</option>
  <option value="o4">Option 4</option>
</select> 

<div>
  <a href="#" class="o1">Link A</a>
  <a href="#" class="o2">Link B</a>
  <a href="#" class="o3">Link C</a>
  <a href="#" class="o4">Link D</a>
</div>

<div>
   <a href="#" class="o1">Link A</a>
   <a href="#" class="o2">Link B</a>
   <a href="#" class="o3">Link C</a>
   <a href="#" class="o4">Link D</a>
</div>

I know this process will include the .addClass() .removeClass() and .change(), I’m just not sure how to put it all together so that it works dynamically across all the divs.

Thanks in advance.

Answer 1

Link so:

$('select').on('change', function(){
    var klass = this.value;
    $('.highlight').removeClass('highlight');
    $('a.'+klass).addClass('highlight');
});