Home / Questions / 125870
Accepted
MNibor
Asked: 2020-12-20 10:20:52 +0800 CST 2020-12-20 10:20:52 +0800 CST

Complicated with JS

  • 772

I have a small problem with some things that I am doing in js and that are not working well for me.
The issue 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>

Depending on what the user selects, it 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 select event works fine, that is, it shows me only div1 in option 1 and only div2 in option 2, but I don't know how to build it to show me the two divs with option 3

Can someone guide me?

javascript

3 Answers

  1. Without complicating things, what you can do is save in the optionas an attribute the selector of the element that shows and so when the selected option changes, you get the value of the attribute and 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>

    What this does is that as option 1 only shows the #div_1then I assign the selector of which it is going to show and in the case of 3, then he added the selectors of the ones that it shows that are #div_1and #div_2.

    • 4
  2. Best Answer

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

    I leave you 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>

    • 3

  3. 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>

    • 1