Display Div if note is less than 8

Navigation
0

How to make a script, what if some of these 3 dropdowns down is less than 8 to display a div 

  <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="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="pes23" 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>
    
asked by anonymous 06.06.2016 / 21:19

2 answers

2

One way is to put a class for these elements, call a function in onchange , so you get all the elements and run by checking if any of them is less than 8 selected to display the div, eg 

function privilegios(){
  
  elementos = document.getElementsByClassName('sel');
  
  for(i = 0; i < elementos.length; i++){
    
    var val = parseInt(elementos[i].value);
    
    if(val < 8 && !isNaN(val) ){
  		document.getElementById('exibir').style.display = 'block';
      return;//encontrou um valor menor que 8, exibe a div e interrompe o loop
  	} else {
  		document.getElementById('exibir').style.display = 'none';
  	}
    
  }
  

}
#exibir{
  display:none;
}
<select name="pes21" id="privileges1" class="sel" onchange="privilegios()" >
          <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="privileges1" class="sel" onchange="privilegios()">
          <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="privileges1" class="sel" onchange="privilegios()">
          <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 id="exibir">
        Exibiu a div
        </div>

NOTE: You should not use the same id for multiple elements, id="privileges1" , ids are unique for each element. For more information click here.

    
06.06.2016 / 21:59
0

Follow the script using jquery 

$(document).ready(function() {
  showDiv('.select');
  $('.select').on('change', function() {
    showDiv('.select');
  });
});

function showDiv(selector) {
  $(selector).each(function() {
    var display = ($(this).find('option[value != ""]').length < 9) ? 'show' : 'hide';
    $('#divTexto')[display]();
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><selectname="pes21" id="privileges1" class="select">
  <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="privileges1" class="select">
  <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="privileges1" class="select">
  <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>
    
06.06.2016 / 22:13
You are giving error in the array using the while loop Return - Method called on form1, and return on form2