Selemlar...
Jquery ile form elemanların değerlerini almak için val() metodunu kullanıyoruz. Tabi burada form elemanlarına uygulanacak olan olaylar önemli. Örneğin, bir select box'ta seçilen değeri , seçilir seçilmez almak için "change" olayından faydalanabiliriz.
Önce bir form ve select box ile seçilen değeri yazdıracağımız bir P etiketi ekleyelim..
<form action="">
<select name="sec" id="sec">
<option value="0">Lütfen Seçiniz..</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<p class="secim"></p>
</form>
Select box ile alınacak değer , option'lara verilen value değerlerdir. Yani HTML kısmında option'ların value parametresine ne yazıldıysa , değer olarak o dönecektir. Önce jquery bağlantısını ardından jquery kodlarımızı yazalım.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$("#sec").change(function(){ // select box değeri değiştiğinde
//select box'ta seçilen değer
secilen=$(this).val();
//eğer "lütfen seçiniz" seçili ise
if(secilen=="0") {secilen="Seçim Yapılmadı!";}
// diğer option'lar seçili ise
else {
secilen="Seçilen : "+secilen;
}
//secim (P) içine yazdırılıyor..
$(".secim").text(secilen);
});
</script>
select box değiştiğinde, yani seçim yapıldığında (change olayı) , öncelikle seçilen değeri "this" seçicisi ile "secilen" değişkenine aktarıyoruz. (Fonskiyon doğrudan select box'a atandığı için this kullanabilidik). Html kısmında, select box'ın ilk option'u için "Lütfen Seçiniz" yazmış ve value değeri için 0 vermiştik. Dolayısıyla eğer seçilen değer bu ise (0), secilen değişkenine "Seçim Yapılmadı!" yazdık.
Diğer koşullarda ise seçilen değişkenini "Seçilen : x" şeklinde ayarlıyoruz. Fonksiyon bitiminde de , secilen değişkenini sayfadaki "secim" class'lı P etiketi içine yazdırıyoruz.