0

Como fazer um script, que se alguns destes 3 dropdowns a baixo for menor que 8 exibir uma 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>

2 Respostas 2

2

Uma maneira é colocar uma classe para esses elementos, chamar uma função no onchange, assim você pega todos os elementos e percorre verificando se algum deles está com valor menor do 8 selecionado para exibir a div, exemplo:

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>

OBS: Não se deve utilizar o mesmo id para vários elementos, id="privileges1", ids são únicos para cada elemento. Para maiores informações clique aqui.

0

Segue o script usando 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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .