With a select element, it allows you to manipulate your data with javascript, using option data.
For example, I have 2 images and we want our image to change when we change the option.
Javascript Code;
For example, I have 2 images and we want our image to change when we change the option.
HTML:
<!-- Html Code -->
<!-- We gave image-change class value to our html select element-->
<select class="image-change">
<option value="img1">Image 1</option>
<option value="img2">Image 2</option>
</select>
<!--
We have prepared our select box,
the first option is our 1st image as img1,
the other contains the data of our 2nd image
-->
<img class="imgclass1" src="image1.jpg"/>
<img class="imgclass2" src="image2.jpg" style="display:none" />
<!--
We have prepared 2 image html codes above.
We define imgclass1 class for our 1st image
We have defined imgclass2 class for our 2nd image and we have hidden our 2nd image.
-->
Javascript Code;
JavaScript:
$(".image-change").change(function () {
var thisval = $(this).val();
if (thisval == "img1") {
$(".imgclass1").show();
$(".imgclass2").hide();
} else {
$(".imgclass1").hide();
$(".imgclass2").show();
}
});