Javascript kullanarak Select ile veri değişikliği

[Yepkoo]

Bir select html elementi ile seçtiğiniz option verilerine göre javascript ile işlem yapmanızı sağlar.

Örneğin 2 resmimi var ve option değiştirdiğimizde resmimizin değişmesini istiyoruz.

<!-- Html Kodu -->

<!-- Html select elementimize image-change class değerini verdik -->
<select class="image-change">
    <option value="img1">Image 1</option>
    <option value="img2">Image 2</option>
</select>

<!--
Select kutumuzu hazırladık,
birinci seçenek img1 olarak 1.ci resmimizi,
diğeri 2.ci resmimizin verilerini içerir
-->

<img class="imgclass1" src="image1.jpg"/>
<img class="imgclass2" src="image2.jpg" style="display:none" />

<!--
Yukarıda 2 adet resim html kodumuzu hazırladık
1. resmimize imgclass1 class tanımladık
2. resmimize imgclass2 class tanımladık ve 2.ci resmimizi gizledik.
-->

Javascript Kodumuz ise;

/*
1. ci resmi seçersek == "img1" ise 1.ci resmi göster, 2.ci resmi gizle, diğerinde ise tam tersini yapacaktır.
*/
 $(".image-change").change(function () {
  var thisval = $(this).val();
  if (thisval == "img1") {
      $(".imgclass1").show();
      $(".imgclass2").hide();
  } else {
      $(".imgclass1").hide();
      $(".imgclass2").show();
  }
});