¿Cómo mostrar div después de seleccionarlo en seleccionar en el menú desplegable?
a continuación está mi código
$(document).ready(function(){ $('#selectoption').on('change', function() { if ( this.value == '0'){ $("#option0").show(); } else if ( this.value == '1') { $("#option1").show(); } else { $("#option2").show(); } }); }); #option0, #option1, #option2 { display: none; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="col-12"> <select id="selectoption"> <option value="0">Option 1</option> <option value="1">Option 2</option> <option value="2">Option 3</option> </select> </div> <div class="row"> <div class="col-4"> <div id="option0"> <p class="content">Lorem ipsum... Example...</p> </div> </div> <div class="col-4"> <div id="option1"> <p class="content">Lorem ipsum... Example...</p> </div> </div> <div class="col-4"> <div id="option2"> <p class="content">Lorem ipsum... Example...</p> </div> </div> </div>el código funciona, pero quiero que el div se oculte si se seleccionó otro + el código sea escalable, es decir, sin 10 más cuando hay 10 divs
En primer lugar, oculte su div usando comodines y muestre div según el valor desplegable.
$(document).ready(function() { $('#selectoption').on('change', function() { $("[id^='option']").hide(); var val = $(this).val(); $("#option" + val).show(); }); }); #option0, #option1, #option2 { display: none; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" /> <div class="col-12"> <select id="selectoption"> <option value="0">Option 1</option> <option value="1">Option 2</option> <option value="2">Option 3</option> </select> </div> <div class="row"> <div class="col-4"> <div id="option0"> <p class="content">Lorem ipsum... Example...</p> </div> </div> <div class="col-4"> <div id="option1"> <p class="content">Lorem ipsum... Example...</p> </div> </div> <div class="col-4"> <div id="option2"> <p class="content">Lorem ipsum... Example...</p> </div> </div> </div>Puede agregar una clase común a todos los div, de modo que en cada clic pueda ocultarlo por nombre de clase. Luego obtenga el valor del elemento seleccionado y, en función de los valores, seleccione el elemento y muéstrelo.
$('#selectoption').on('change', function() { var getValue = $(this).val(); $(".common").hide(); $("#option" + getValue).show(); });Marcado HTML:
<div class="row"> <div class="col-4"> <div class="common" id="option0"> <p class="content">Lorem ipsum... Example...</p> </div> </div> <div class="col-4"> <div class="common" id="option1"> <p class="content">Lorem ipsum... Example...</p> </div> </div> <div class="col-4"> <div class="common" id="option2"> <p class="content">Lorem ipsum... Example...</p> </div> </div> </div>El código no es óptimo, pero todo lo que tienes que hacer es ocultar todo antes de mostrar uno nuevo.
$(document).ready(function(){ $("#option0").show(); $('#selectoption').on('change', function() { $("#option0").hide(); $("#option1").hide(); $("#option2").hide(); if ( this.value == '0'){ $("#option0").show(); } else if ( this.value == '1') { $("#option1").show(); } else { $("#option2").show(); } }); }); #option0, #option1, #option2 { display: none; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="col-12"> <select id="selectoption"> <option value="0">Option 1</option> <option value="1">Option 2</option> <option value="2">Option 3</option> </select> </div> <div class="row"> <div class="col-4"> <div id="option0"> <p class="content">Lorem ipsum... Example...</p> </div> </div> <div class="col-4"> <div id="option1"> <p class="content">Lorem ipsum... Example...</p> </div> </div> <div class="col-4"> <div id="option2"> <p class="content">Lorem ipsum... Example...</p> </div> </div> </div>