Complicated with JS

Question

Complicated with JS

Navigation

#1 by (3 votes)
#2 by (3 votes)
#3 by (1 votes)

3

I have a little problem with some things that I'm doing in js and that are not working well for me.
The subject is like this: I have a select where the user chooses options:

<select id="cobertura" name="cobertura">
  <option value="">Elija una opción...</option>
  <option value="1">Opción 1</option>
  <option value="2">Opción 2</option>
  <option value="3">Opción 3</option>
 </select>

According to what the user selects, he will show me or not certain "divs" on the page for what I do:

<div id="div_1" class="contenido">
   <!-- muestro contenido -->
</div>

<div id="div_2" class="contenido">
   <!-- muestro otro contenido diferente -->
</div>

Now, when the user chooses option 3, what I have to show are the two divs for this I do:

<script type="text/javascript">
   $(document).ready(function(){
     $(".contenido").hide();
     $("#cobertura").change(function(){
        $(".contenido").hide();
        $("#div_" + $(this).val()).show();
     });
   });
 </script>

Now, this validation before the event of the select goes well, that is, it shows me only div1 in option 1 and only div2 in option 2 but I do not know how to build that shows me the two divs with the option 3

Can someone guide me?

javascript

asked by MNibor 19.12.2017 в 19:20

source

3 answers

3

Without complicating things, what you can do is save in the option as an attribute the selector of the element that shows and so when you change the selected option, you get the value of the attribute and you show it:

   $(document).ready(function(){
     $(".contenido").hide();
     $("#cobertura").change(function(){
        $(".contenido").hide();
        $($(this).find("option:selected").data("show")).show();
     });
   });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="cobertura" name="cobertura">
  <option value="">Elija una opción...</option>
  <option data-show="#div_1" value="1">Opción 1</option>
  <option data-show="#div_2"  value="2">Opción 2</option>
  <option data-show="#div_1, #div_2" value="3">Opción 3</option>
 </select>


<div id="div_1" class="contenido">
   contenido 1
</div>

<div id="div_2" class="contenido">
  contenido 2
</div>

This what it does is that since option 1 only shows the #div_1 then I assign it the selector of which it is going to show and in the case of 3, then he added the selectors of the ones that shows that they are #div_1 and #div_2 .

answered by 19.12.2017 в 19:28

1

What you can do is compare if the value of the Select is equal to 3 show all the elements through its class something like this:

    $(document).ready(function () {
        $(".contenido").hide();
        $("#cobertura").change(function () {
            $(".contenido").hide();
            if (($(this).val()) == "3")
            {
                $(".contenido").show();
            }
            else {
                $("#div_" + $(this).val()).show();
            }
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="cobertura" name="cobertura">
    <option value="">Elija una opción...</option>
    <option value="1">Opción 1</option>
    <option value="2">Opción 2</option>
    <option value="3">Opción 3</option>
</select>
<div id="div_1" class="contenido">
    <!-- muestro contenido --><h1>Uno</h1>
</div>

<div id="div_2" class="contenido">
    <h1>Dos</h1>
    <!-- muestro otro contenido diferente -->
</div>

answered by 19.12.2017 в 19:31

How to convert the delimiter of a csv file how to send an email that has a html and php code message?

score 3 · Accepted Answer

Taking into account your structure and that logic will always be that I would make a condition that asks when the value is equal to 3, and if true then it shows the two containers of content:

I leave the functional example:

$(document).ready(function(){
  $(".contenido").hide();
 
  $("#cobertura").change(function(){
    var valor = $(this).val();
    
    if(valor == 3){
      $(".contenido").show();
    }else{
      $(".contenido").hide();
      $("#div_" + $(this).val()).show();
    }
    
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="cobertura" name="cobertura">
  <option value="">Elija una opción...</option>
  <option value="1">Opción 1</option>
  <option value="2">Opción 2</option>
  <option value="3">Opción 3</option>
 </select>


<div id="div_1" class="contenido">
   <h1>Contenido 1</h1>
</div>

<div id="div_2" class="contenido">
   <h1>Contenido 2</h1>
</div>