TechCodeview

В тази статия ще научим как да получите избрани стойности в падащия списък с помощта на jQuery. На първо място, ще разберем тази статия с помощта на jQuery, jQuery селектор и jQuery val () метод. След това ще разберем тази тема с помощта на различни примери.

Какво имате предвид под jQuery?

jQuery е бърза, лека, малка и богата на функции JavaScript библиотека.

Използвайте jQuery: избран селектор в комбинация с метода val (), за да намерите стойността на избраната опция в падащ списък.

Селекторът в jQuery:

Това е HTML елемент, в който се прилага декларацията.

Например: избрани, проверени и т.н.

Selected се използва за указване на избора по подразбиране при първоначалното зареждане на формуляра.

метод val () в jQuery:

Този метод се използва за получаване на стойностите на елементите на формуляра или за задаване на стойността на атрибута, използван за избраните елементи.

Синтаксис:

 $(selector).val (); 

Пример:

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

Падащ списък с и етикет.

Етикетите select и option се използват за създаване на падащи менюта. Те позволяват на потребителя да избере един или няколко варианта от списък с опции. Всички избори не се показват на екрана, но се виждат, когато издърпате падащия списък. Те се използват за пестене на място, тъй като се показва само един елемент от списъка.

За създаване на изтеглящи се списъци се използва tag вместо tag. Сдвоеният таг започва с отварящия таг и завършва със затварящия таг. Този етикет трябва да се използва с етикета.

Синтаксис:

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

Различните атрибути, използвани с етикета, са:

Многократни:Използва се за настройка на етикета да приема множество опции. По подразбиране може да приеме една опция, избрана от потребителя. За да избере няколко опции, потребителят трябва да натисне щракване, докато щраква върху опцията.Име:Използва се за указване на име за падащия списък.

Различните атрибути, използвани с етикет, са:

Стойност:Използва се за указване на стойността, която се изпраща при изпращане на формуляра. Ако атрибутът стойност е пропуснат в тага, тогава се използва съдържанието на заглавието.избрано:Използва се за указване на предварително избрания избор, когато формулярът е първоначално зареден в браузър.

Следните примери се използват за получаване на избраната стойност от падащия списък в jQuery.

Пример 1:

Как да получите избрана стойност от падащия списък в jQuery.

 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 след като изберете множеството елемент от списъка и щракнете върху бутон, той показва предупредително съобщение с избрания елемент от падащия списък.

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

Тук,

Size = '3' се използва за показване на броя на елементите, показани в падащия списък, multiple се използва за избор на множество стойности от падащия списък.

Изход:

Резултатът от този пример е даден по-долу.