JQuery addClass to element based on TWO selected options-CodePudding

Im very new to jQuery.

I have two dropdowns with 5 options. I want to add a class in a div depending on which option is selected. This class will then change the layout of the content using CSS. I know ow to it with one dropdown, but im a bit confused with two

Thanks

Here is an example if it helps!

<select  id="fil-select" data-target=".point">
  <option value="Very Low" >Very Low</option>
  <option value="Low" >Low</option>
  <option value="Average" >Average</option>
  <option value="High" >High</option>
  <option value="Very High" >Very High</option>
</select>

<select  id="fil-select2" data-target=".point">
  <option value="Very Low" >Very Low</option>
  <option value="Low" >Low</option>
  <option value="Average" >Average</option>
  <option value="High" >High</option>
  <option value="Very High" >Very High</option>
</select>


<div ></div>

CodePudding user response：

the code below is a little bit long winded, but I hope it shows you the basic logic of how it's done. Kindly run the snippet below and check-- was that what you had in mind?

function assignClassesFromDropdowns(){
   const firstSelectValue = $('#fil-select').val();
   const secondSelectValue = $('#fil-select2').val();
   
   //remove existing classes, then re-attach what I assume is the default class
   $('.point').removeClass().addClass('point');
   
   //add the classes
   $('.point').addClass(firstSelectValue);
   $('.point').addClass(secondSelectValue);
   
   //below is just to display the existing classes as text inside the div
   $('.point').text($('.point').attr('class'))
}

//run our function on load
assignClassesFromDropdowns();

//run our function whenever any of the dropdowns change
$('#fil-select, #fil-select2').on('change', function(){

  assignClassesFromDropdowns();  

})

.wrapper {
  display:flex;
  justify-content:center;
  align-items:center;
}
.selects {
  margin-right:20px;
}

.point {
  border:1px solid black;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
}

.red {
  background:red;
}
.green {
  background:green;
}
.blue {
  background:blue;
}
.pink {
  background:pink;
}
.yellow {
  background:yellow;
}

.size1 {
  width:100px;
  height:100px;
}
.size2 {
  width:150px;
  height:150px;
}
.size3 {
  width:200px;
  height:200px;
}
.size4 {
  width:250px;
  height:250px;
}
.size5 {
  width:300px;
  height:300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div >

<div >
<div>first select</div>
<select  id="fil-select" data-target=".point">
  <option value="red">Very Low</option>
  <option value="green">Low</option>
  <option value="blue">Average</option>
  <option value="pink">High</option>
  <option value="yellow">Very High</option>
</select>
<br><br>
<div>second select</div>
<select  id="fil-select2" data-target=".point">
  <option value="size1">Very Low</option>
  <option value="size2">Low</option>
  <option value="size3">Average</option>
  <option value="size4">High</option>
  <option value="size5">Very High</option>
</select>
</div>


<div ></div>
</div>