TechCodeview

Bu yazımızda jQuery yardımıyla açılır listeden seçilen değerlerin nasıl alınacağını öğreneceğiz. Öncelikle bu yazımızı jQuery, jQuery selector ve jQuery val() metodunu kullanarak anlayacağız. Daha sonra çeşitli örnekler yardımıyla bu konuyu anlayacağız.

jQuery'den kastınız nedir?

jQuery hızlı, hafif, küçük ve zengin özelliklere sahip bir JavaScript kitaplığıdır.

jQuery'yi kullanın: Seçilen seçeneğin değerini açılır listede bulmak için seçili seçiciyi val () yöntemiyle birlikte kullanın.

jQuery'deki seçici:

Bildirimin uygulandığı bir HTML öğesidir.

Örneğin: seçilmiş, işaretlenmiş vb.

Seçilen, form ilk kez yüklendiğinde varsayılan seçeneği belirtmek için kullanılır.

jQuery'deki val () yöntemi:

Bu yöntem, form elemanlarının değerlerini almak veya seçilen elemanlar için kullanılan öznitelik değerini ayarlamak için kullanılır.

Sözdizimi:

 $(selector).val (); 

Örnek:

 $('input: text').val ('javaTpoint!'); 

ve etiketi içeren açılır liste.

Seçim ve seçenek etiketleri, açılır menüler oluşturmak için kullanılır. Kullanıcının seçenekler listesinden tekli veya çoklu seçim yapmasına olanak tanır. Tüm seçenekler ekranda gösterilmez ancak açılır listeyi çektiklerinde görünürler. Listenin yalnızca bir öğesi görüntülendiğinden yerden tasarruf etmek için kullanılırlar.

Açılan listeler oluşturmak için tag yerine tag kullanılır. Eşleştirilmiş etiket, açılış etiketiyle başlar ve kapanış etiketiyle biter. Bu etiket etiketiyle birlikte kullanılmalıdır.

Sözdizimi:

 Text Label-1 Text Label-2 ………………………………………………………………………………………………….. ………………………………………………………………………………………………….. 

Etiketle birlikte kullanılan çeşitli özellikler şunlardır:

Çoklu:Etiketi çok sayıda seçeneği kabul edecek şekilde ayarlamak için kullanılır. Varsayılan olarak kullanıcı tarafından seçilen tek bir seçeneği alabilir. Birden fazla seçeneği seçmek için kullanıcının seçeneği tıklarken tıklama tuşuna basması gerekir.İsim:Açılan listeye isim belirtmek için kullanılır.

Etiketle birlikte kullanılan çeşitli özellikler şunlardır:

Değer:Form gönderildiğinde gönderilecek değeri belirtmek için kullanılır. Etikette değer özelliği atlanırsa başlık içerikleri kullanılır.Seçilen:Form ilk kez bir tarayıcıya yüklendiğinde önceden seçilen seçeneği belirtmek için kullanılır.

Aşağıdaki örnekler, seçilen değeri jQuery'deki açılır listeden almak için kullanılır.

Örnek 1:

JQuery'deki açılır listeden seçilen değer nasıl alınır?

 Get Selected Value in drop-down using jQuery h1 { color: green; } h5 { color: green; } h4 { color: green; } p { color: red; } .select { margin: 40px; width: 60%; height: 300px; padding: 30px; border: 2px solid green; } body { background-color: pink; } $(document).ready (function () { $(&apos;select.country&apos;).change (function () { var selectedCountry = $(this).children(&apos;option:selected&apos;).val(); alert (&apos;You have selected the country - &apos; + selectedCountry); }); }); <p> <b> Get Selected Value in drop-down using jQuery </b> </p> <h4> Select Country from drop-down list: </h4> <br> United States India United Kingdom Brazil Germany <br> <br> <b> Get selected values from list </b> 

Açıklama:

Yukarıdaki örnekte ve etiketi yardımıyla bir açılır liste oluşturduk. Bunun içinde listeden çoklu bir değer seçip bir oluşturursak Listeden birden fazla öğeyi seçtikten sonra bir düğmeye tıkladığımızda, açılır listeden seçilen öğeyi içeren bir uyarı mesajı görüntülenir.

 United States India United Kingdom Brazil Germany <br> <br> <b> Get selected values from list </b> 

Burada,

Boyut ='3', açılır listede gösterilen öğe sayısını görüntülemek için kullanılır; çoklu, açılır listeden birden fazla değer seçmek için kullanılır.

Çıktı:

Bu Örneğin çıktısı aşağıda verilmiştir.