jquery ile select option ayarları

Önceki yazılarımızda Jquery ile ilgili bir slayt yayınlayarak Jquery'e giriş yapmıştık. Aşağıdaki linkten bu yazımıza erişebilirsiniz.

Jquery Giriş

Şimdi aşağıdaki gibi şehirlerin yer aldığı bir select(seçim) nesnesi düşünelim.  Burada herhangi bir ili seçtiğimiz zaman o ile ait plakanın ekrana mesaj olarak getirmek isteyelim. Select nesnesini aşağıdaki gibi oluşturuyoruz. Burada id değeri için Türkçe karakterler kullanmamaya dikkat etmeliyiz. Biz "şehir" yerine "sehir" ismini verdik.
<select id="sehir">
   <option value="None" selected>-- Seçiniz --</option>
   <option value="34">Istanbul</option>
   <option value="06">Ankara</option>
   <option value="35">İzmir</option>
   <option value="23">Elazığ</option>
   <option value="42">Konya</option>
</select>



Aşağıdaki kod satırı ile "Ankara İlini Seç" butonunu oluşturuyoruz, benzer şekilde "Elazığ ilini seç" butonunu da oluşturuyoruz. 
<input type="button" value="Ankara İlini Seç" id="secAnkara">

Burada id değerini her nesne için farklı vermeye dikkat edelim.  Aşağıdaki jquery kod satırlarında ise secAnkara isimli nesne tıklandığında "sehir" nesnesinde değeri "06" olan seçenek seçiliyor.

$("#secAnkara").click(function () {
		$("#sehir").val("06");
    });


Aşağıdaki kod satırında ise hangi seçenek kullanıcı tarafından seçilirse onun value değeri ekrana alert
fonksiyonu ile mesaj verilerek yazılıyor.

  $(document).ready(function(){
	$('#sehir').on('change', function() {
			alert($("#sehir").val());
	});

Şimdi kodumuzun tamamını görelim. Aşağıdaki kod satırlarını notepad gibi bir editöre kopyalayıp yapıştırdıktan sonra dosya adını "select.html" vererek kaydedin  daha sonra üzerine tıklayarak tarayıcıda nasıl çalıştığını görebilirsiniz.

 

 

   
<html>
<head>
	<meta charset="utf-8">
</head>
<body>

İller :<select id="sehir">
   <option value="None" selected>-- Seçiniz --</option>
   <option value="34">Istanbul</option>
   <option value="06">Ankara</option>
   <option value="35">İzmir</option>
   <option value="23">Elazığ</option>
   <option value="42">Konya</option>
</select>
<br>
<br>
<input type="button" value="Ankara İlini Seç" id="secAnkara">
<input type="button" value="Elazığ İlini Seç" id="secElazig">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">

	$("#secAnkara").click(function () {
		//alert($('#sehir').val());
		$("#sehir").val("06");
    }); 
	
	$("#secElazig").click(function () {
		$("#sehir").val("23");
    });

		
		
  $(document).ready(function(){
	$('#sehir').on('change', function() {
			alert($("#sehir").val());
	});
		
	
  });
</script>

</body>
  
Mutlu kodlamalar,
Mart, 2017
Oğuzhan TAŞ

Bookmark and Share
Dil Değiştir(Change Language)
Kategoriler
Kütüphane Programı
En çok Okunan 18 Makale