Display div according to note

Question

This script works as follows: if one of the 3 dropdowns have note less than 8, it will show the content of a div occult.

It works as follows:

• first dropdown has a note <= 8 // Shows the div
• 2nd dropdown has a note <= 8 // As 1º is already down keep a div the show.

Now here is the condition with problem:

• 3º dropdown has note above >= 8 // it hides the div , and can not because there is already note below 8 among the three dropdowns.

Summing up: If any of the 3 dropdowns are less than 8: show the div.

var Privileges = jQuery('#privileges1');
var select = this.value;
Privileges.change(function() {
  if (parseInt($(this).val()) < 8) {
    $('.resources').show();
  } else {
    $('.resources').hide();
  }
});


var Privileges = jQuery('#privileges2');
var select = this.value;
Privileges.change(function() {
  if (parseInt($(this).val()) < 8) {
    $('.resources').show();
  } else {
    $('.resources').hide();
  }
});


var Privileges = jQuery('#privileges3');
var select = this.value;
Privileges.change(function() {
  if (parseInt($(this).val()) < 8) {
    $('.resources').show();
  } else {
    $('.resources').hide();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<select name="pes21" id="privileges1" class="" onclick="craateUserJsObject.ShowPrivileges();">
  <option value=""></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</select>

<select name="pes22" id="privileges2" class="" onclick="craateUserJsObject.ShowPrivileges();">
  <option value=""></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</select>

<select name="pes23" id="privileges3" class="" onclick="craateUserJsObject.ShowPrivileges();">
  <option value=""></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</select>

<div class="resources" style=" display: none;">
  <p>Ola texto</p>
</div>

https://jsfiddle.net/fabioo7/710uh90x/

Answer 1

It is not a beautiful solution because it is being forced to work with 3 values:

$('#privileges1').change(function(){validaValor()});
$('#privileges2').change(function(){validaValor()});
$('#privileges3').change(function(){validaValor()});

function validaValor() {
  x = parseInt($('#privileges1').val());
  y = parseInt($('#privileges2').val());
  z = parseInt($('#privileges3').val());

  if((x + y + z) < 24) { // 8 + 8 + 8
    $('.resources').show();
  } else {
    $('.resources').hide();
  }
}

His code was not working because he was only considering the value of each select and not the value of the three.

EDITION

Fabio Henrique, I really did not foresee this situation so I suggest another solution, which is also not beautiful because it forces the use of a quantity X objects:

$('#privileges1').change(function(){validaValor()});
$('#privileges2').change(function(){validaValor()});
$('#privileges3').change(function(){validaValor()});

function validaValor() {
  x = parseInt($('#privileges1').val());
  y = parseInt($('#privileges2').val());
  z = parseInt($('#privileges3').val());

  if(x < 8 || y < 8 || z < 8) {
    $('.resources').show();
  } else {
    $('.resources').hide();
  }
}

If you get another solution, please answer your own question, this problem seems very interesting to me to be solved in a more generic way and able to handle N objects dynamically, I will continue in search of a better solution.