Change the visibility of a DIV based on the value of two select using jQuery

Asked

Viewed 47 times

0

I have 2 select options. If the option of select1 AND the option of Select2 is selected, nothing appears. Otherwise a form appears.

HTML

   <div class="form-group" style="color:black">
      <select id="test1" name="test1">
          <option value=""> Seleciona</option>
           <option value="Sim"> Sim </option>
           <option value="Não"> Não </option>
        </select>
   </div>

   <div class="form-group" style="color:black">
          <label> Com Consequentimento? </label >
         <select id="conse" name="consente_vq" >
           <option value=""> Selecione </option>
            <option value="Sim"> Sim </option>
            <option value="Não"> Não </option>
          </select>
    </div>
    <div id="form2">
        <form> //aqui teria perguntas </form>
     </div>

I wish that when "Test1" == 'No' && "test2" ='No' "form2" does NOT appear, otherwise it already appears.

I only managed with a select. Something like this:

Javascript

    <script> $("#test1").change(function(){
       if($(this).val() == 'Não'){
           $("#form2").hide();
       }else{
           $("#form2").show();
       }

       });
    </script>

But when I try to do it with the 2 select I can’t anymore

javascript html jquery

  • Important you [Dit] your question and explain objectively and punctually the difficulty found, accompanied by a [mcve] of the problem and attempt to solve. To better enjoy the site, understand and avoid closures and negativities worth reading the Stack Overflow Survival Guide in English.

1 answer

1


According to the jQuery documentation, the function val:

Get the current value of the first element in the element set match or define the value of each matched item.

So I made a few edits to his code and it went like this:

HTML code

    <div class="form-group" style="color:black">
      <select id="test1" name="test1">
          <option value=""> Seleciona</option>
           <option value="Sim"> Sim </option>
           <option value="Não"> Não </option>
        </select>
    </div>

    <div class="form-group" style="color:black">
      <label> Com Consequentimento? </label >
     <select id="conse" name="consente_vq" >
       <option value=""> Selecione </option>
        <option value="Sim"> Sim </option>
        <option value="Não"> Não </option>
      </select>
    </div>
    <div id="form2">
       <form>
         <p>
           Isso deve sumir ou aparecer conforme a seleção.
         </p>
       </form>
    </div>

Code Javascript + jQuery

   $("#test1").change(function(){
       verificaOps();
   });
   $("#conse").change(function(){
       verificaOps();
   });
   
   function verificaOps()
   {
    if($( "select#test1" ).val() === 'Não' &&  $( "select#conse" ).val() === 'Não'){
           $("#form2").hide();
       }else{
           $("#form2").show();
       }
   }

You can test the code here at Jsfiddle.

Basically what we have that way is that when they’re changed, the event change of selects calls the function verificaOps, which changes the visibility of the form div if the option has not been selected in both.

Browser other questions tagged javascript html jquery

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