Bu yazımda sizlere jquery ile dropdownlist te seçili olan kayıdın text ve value değerlerini nasıl alabileceğimizden bahsedicem.Her zaman ki gibi gerekli olan jquery kütüphanesini <head></head> taglarımızın arasına yerleştiriyoruz.Sayfamıza bir adet dropdownlist ve 2 adet buton olarak kullanacağımız span elementinden ekliyoruz.Siz isterseniz buton için farklı bir elementte kullanabilirsiniz. Sayfamız jquery kodları olmadan şu şekilde olmalı.

 

Technorati Etiketleri: ,,,,,

   1: <table>
   2: <tr>
   3: <td>
   4:     <asp:DropDownList ID="DropDownList1" runat="server" Width="150px">
   5:         <asp:ListItem Value="34">İstanbul</asp:ListItem>
   6:         <asp:ListItem Value="06">Ankara</asp:ListItem>
   7:         <asp:ListItem Value="12345">Test</asp:ListItem>
   8:     </asp:DropDownList></td>
   9: <td><span id="button">Butonum</span> | <span id="button2">Butonum2</span></td>
  10: </tr>
  11: </table>

Eğer sayfamızı bu şekilde tasarladık ise şimdi sıra yine head taglarımızın arasına jquery kodlarımızı yazmaya geldi.O da şu şekilde oluyor;

   1: <script>
   2:     $(document).ready(function(){
   3:     
   4:     $("#button").click(function()
   5:     {
   6:    alert($("#DropDownList1").find("option").filter(":selected").text());
   7:     })
   8:     $("#button2").click(function()
   9:     {
  10:    alert($("#DropDownList1").val());
  11:     })
  12:     });
  13:     </script>

Kısaca açıklamak gerekir ise;

”button1” id sine sahip span elementimize tıkladığımızda dropdownlist teki seçili kayıdın bize text değerini döndürüyor.

”button2” is sine sahip span elementimize tıkladığımızda dropdownlist teki seçili kayıdın bize value değerini döndürüyor.

Tabi value değerini almak basit.ama text değerini almak istiyor iseniz şu ifadeyi kullanmalısınız;

”$("#DropDownList1").find("option").filter(":selected").text()”

Projenin kaynak kodlarına buradan ulaşabilirsiniz.

Çalışmamın demosunu buradan görebilirsiniz.

Başka bir yazıda görüşmek üzere.