Add class to divs if options in dropdown has specific data attribute

December 24, 2021

I have a html like this

<div class="container">
<select class="product-select" id="product-selections">
<option data-option-1="M" data-option-2="cream" data-available="true" value="31979558568034">M / cream</option>
<option data-option-1="M" data-option-2="yellow" data-available="false" value="31979558568035">M / yellow</option>
<option data-option-1="M" data-option-2="red" data-available="true" value="31979558568036">M / red</option>
<option data-option-1="M" data-option-2="green" data-available="false" value="31979558568037">M / green</option>
<option data-option-1="M" data-option-2="blue" data-available="false" value="31979558568038">M / blue</option>
</select>
<div class="colors">
<span class="creme">Creme</span>
<span class="blue">Blue</span>
<span class="yellow">Yellow</span>
<span class="red">Red</span>
<span class="green">Green</span>
</div>
</div>

I want to add class "not-available" to span elements having class which matches the data-option-2 value in option element in dropdown with attribute data-available=false.

For example:

     <option data-option-1="M" data-option-2="yellow" data-available="false" 
     value="31979558568034">M / yellow</option>

It has data-available="false" and data-option-2="yellow" so I want to add class "not-available" to Yellow as it has the class yellow which matches with the value of data-option-2 having data-available=false.
So the result should look something like this :

<div class="colors">
<span class="creme">Creme</span>
<span class="blue not-available">Blue</span>
<span class="yellow not-available">Yellow</span>
<span class="red">Red</span>
<span class="green not-available">Green</span>
</div>

Thanks for all the help. I really appreciate.

>Solution :

$('#product-selections > option[data-available=false]').each(function(){
  let dataOption2 = $(this).attr('data-option-2');
  $('div.colors > span.' + dataOption2).addClass('not-available');
});

.not-available {
  text-decoration: line-through;
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="container">
  <select class="product-select" id="product-selections">
    <option data-option-1="M" data-option-2="cream" data-available="true" value="31979558568034">M / cream</option>
    <option data-option-1="M" data-option-2="yellow" data-available="false" value="31979558568035">M / yellow</option>
    <option data-option-1="M" data-option-2="red" data-available="true" value="31979558568036">M / red</option>
    <option data-option-1="M" data-option-2="green" data-available="false" value="31979558568037">M / green</option>
    <option data-option-1="M" data-option-2="blue" data-available="false" value="31979558568038">M / blue</option>
  </select>
  <div class="colors">
    <span class="creme">Creme</span>
    <span class="blue">Blue</span>
    <span class="yellow">Yellow</span>
    <span class="red">Red</span>
    <span class="green">Green</span>
  </div>
</div>