Hi, all this is to change div and div element based on select box is one of the simple concept with the help of javascript and jquery. First insert the jquery library in head section. then define the different types of classes. Here i defined some classes like red, green, black, orange, blue sections.
The below scripts helps you to hide and show the particular div and elements based on the particular selected class. This types of simple scripts really helpful when you develop any web or mobile applications.
Below image shows how it works and also demo page available please check out the demo page and also download the code and customize it according to your choice.
The below scripts helps you to hide and show the particular div and elements based on the particular selected class. This types of simple scripts really helpful when you develop any web or mobile applications.
Below image shows how it works and also demo page available please check out the demo page and also download the code and customize it according to your choice.
Code for change div using selectbox:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Change div based on select box</title>
<style type="text/css">
.box{
color: #fff;
padding: 20px;
display: none;
margin-top: 20px;
font-weight:bold;
}
.red{ background: #ff0000; }
.green{ background: #228B22; }
.black{ background: #000000; }
.orange{ background: #ff5400; }
.blue{ background: #0000ff; }
select{
width:250px;
height:35px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#one").change(function(){
$(this).find("option:selected").each(function(){
var optionValue = $(this).attr("value");
if(optionValue){
$(".box").not("." + optionValue).hide();
$("." + optionValue).show();
} else{
$(".box").hide();
}
});
}).change();
});
</script>
</head>
<body>
<h1>Change div based on select box</h1>
<div>
<select id="one">
<option>Choose Color</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="black">Black</option>
<option value="orange">Orange</option>
<option value="blue">Blue</option>
</select>
</div>
<div class="red box">This is Red div section. You have selected Red div section</div>
<div class="green box">This is Green div section. You have selected Green div section</div>
<div class="black box">This is Black div section. You have selected Black div section</div>
<div class="orange box">This is Orange div section. You have selected Orange div section</div>
<div class="blue box">This is Blue div section. You have selected Blue div section</div>
</body>
</html>
0 Comments