how to show div after selecting it in select in drop-down?
below is my code
$(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>the code works, but I want the div to be hidden if another one was selected + the code to be scalable - i.e. without 10 else when there are 10 divs
First of all hide your div using wild card and show div based upon dropdown value.
$(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>You can add common class to all the div, so that on each click you can hide it by classname. Then get value of selected item, and based on values select item and show it.
$('#selectoption').on('change', function() {
var getValue = $(this).val();
$(".common").hide();
$("#option" + getValue).show();
});
Html Markup:
<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>
The code is not optimal, but all you have to do is hide everything before showing a new one.
$(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>