JQUERY İLE SELECT BOX DEĞERİNİ ALMAK

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.