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.
$('#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>To start just a quick reminder, for Html alone is not an interactive language that can change things automatically based on action, because automatically implies a behavior after an action. Because what you implement in Html by css rules will be displayed and will not "add" nor "remove" any html property to another element without an event to trigger it. What I mean is that you need javascript or ajax to make the job done easier and the proper way. In a real life application data-availlable must be an information coming from database, and this is another thing to consider. Let assume you have to hard code it by setting data in the view. then you will need to add an event listener to the Select element, so that as soon the user click on it to select his choice, then appropriate information will be added to the span element. Let call that function mySelecledItem(). You will have it like this in the select tag:
<select class="product-select" id="product-selections onSelect=mySelected()">
And then you will define the javascript function in your javascript file or straight in the tag of your html file. You may have:
<script>
function mySelected() {
const newSpan = document.querySelector('.blue');
newSpan.classList.add('not-available');
}
</script>
Note this:
> document.querySelector('.blue')
will select the class "blue" and
> newSpan.classList.add('not-available')
will add to that class 'not-available' This is an overview of how you can automatically add the "not-available" to another class. You will need javascript or Ajax.