Show/Hide div by Jquery

Asked

Viewed 14,311 times

0

What I want to do is very simple, only it’s not going.

HTML

      <select name="id_tipo_contacto" id="id_tipo_contacto">
          <option value="empresa">Alugar Filmes/Séries</option>
          <option value="casamento">Vender Filmes/Séries</option>
      </select>
      <div id="empresa" class="formulario"><h2 style="    color: #21BF16;
      font-weight: bolder;">R$07,99 Por dia.</h2></div>
      <div id="casamento" class="formulario" style="display:none;">R$70,00.</div>

jQuery

  <script src="js/jquery-3.2.1.min.js">
    var $j = jQuery.noConflict();
      $j("#id_tipo_contacto").on('change', function(){
          $j(".formulario").hide();
          $j('#' + this.value).show();
});
  </script>
jquery html

  • Igor, your code works: https://jsfiddle.net/Sergio_fiddle/srpesr8m/ maybe you have the script before HTML? put it at the bottom of the page.

  • 1

    Could detail the purpose of the code and what doesn’t work?

  • Ta at the end of everything, can be the version of jQuery?

  • 2

    Create an example that reproduces the error (we can directly run) using JSFIDDLE. The way it is, there’s no way we can know where the fault is.

  • I would simply like to present the values according to the selected option. I already put it under all html, I’ve put it outside the body, inside and nothing.

  • It does not show any error on the console, it just doesn’t work.

  • What doesn’t work?

  • It does not display or hide values..

  • I will send you the link to my entire file, without css or anything, just to see https://jsfiddle.net/cL629s9j/

  • @Igorrinke you can’t use <script src="js/jquery-3.2.1.min.js"> with script inside... you must have 1 tag to get jQuery <script src="js/jquery-3.2.1.min.js"></script> and another to have Javascript inside: <script>....etc....</script>

Show 5 more comments

1 answer

3


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script language="javascript">
<!--
$(document).ready(function() {
    var $j = jQuery.noConflict();
      $j("#id_tipo_contacto").on('change', function(){
          $j(".formulario").hide();
          $j('#' + this.value).show();
});
});
//-->
</script>

  <select name="id_tipo_contacto" id="id_tipo_contacto">
      <option value="empresa">Alugar Filmes/Séries</option>
      <option value="casamento">Vender Filmes/Séries</option>
  </select>
  <div id="empresa" class="formulario"><h2 style="    color: #21BF16;
  font-weight: bolder;">R$07,99 Por dia.</h2></div>
  <div id="casamento" class="formulario" style="display:none;">R$70,00.</div>

  • In the presentations it works, just like the others, but in my file it doesn’t.

  • @Igorrinke something wrong in your publication, I edited the answer and this is how you should publish in your file

  • It worked, thank you very much, I think it was for being below the code

  • exact, when we do to execute it reverses the order

Browser other questions tagged jquery html

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