Show Div if note is less than 8

Asked

Viewed 72 times

0

How to make a script, that if some of these 3 dropdowns down is less than 8 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>
javascript

2 answers

2


One way is to put a class for these elements, call a function in the onchange, so you take all the elements and go through checking if any of them are with less than 8 value selected to display the div, example:

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: The same id should not be used for several elements, id="privileges1", ids are unique to each element. For more information click here.

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>
<select name="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>

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.