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

I have a html like this

<div >
<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 >
<span >Creme</span>
<span >Blue</span>
<span >Yellow</span>
<span >Red</span>
<span >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 >
<span >Creme</span>
<span >Blue</span>
<span >Yellow</span>
<span >Red</span>
<span >Green</span>
</div>

Thanks for all the help. I really appreciate.

CodePudding user response：

$('#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 >
  <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 >
    <span >Creme</span>
    <span >Blue</span>
    <span >Yellow</span>
    <span >Red</span>
    <span >Green</span>
  </div>
</div>

CodePudding user response：

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