Select Change (javascript function)

Yepkoo

Yepkoo
Staff member
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.

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();
  }
});
 
Top