TechCodeview

У цій статті ми дізнаємося, як за допомогою jQuery отримати вибрані значення у випадаючому списку. Перш за все, ми будемо розуміти цю статтю за допомогою jQuery, jQuery selector і jQuery val() method. Після цього ми розберемося в цій темі за допомогою різних прикладів.

Що ви маєте на увазі під jQuery?

jQuery — це швидка, легка, невелика та багатофункціональна бібліотека JavaScript.

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

Селектор в jQuery:

Це елемент HTML, до якого застосовано оголошення.

Наприклад: обраний, перевірений тощо.

Вибране використовується для визначення вибору за замовчуванням під час початкового завантаження форми.

метод val() в jQuery:

Цей метод використовується для отримання значень елементів форми або встановлення значення атрибута, який використовується для вибраних елементів.

Синтаксис:

 $(selector).val (); 

приклад:

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

Розкривний список із тегом і .

Теги select і option використовуються для створення спадних меню. Вони дозволяють користувачеві вибрати один або кілька варіантів зі списку варіантів. Усі варіанти не відображаються на екрані, але вони видно, коли вони витягають розкривний список. Вони використовуються для економії місця, оскільки відображається лише один пункт списку.

Для створення розкривних списків замість тега використовується тег. Парний тег починається початковим тегом і закінчується закриваючим тегом. Цей тег потрібно використовувати з тегом .

Синтаксис:

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

З тегом використовуються такі різні атрибути:

Кілька:Він використовується для налаштування тегу на прийняття численних опцій. За замовчуванням він може приймати одну опцію, вибрану користувачем. Щоб вибрати кілька параметрів, користувач має натиснути клацання, клацаючи параметр.Ім'я:Він використовується для вказівки назви розкривного списку.

Різні атрибути, які використовуються з тегом:

Значення:Він використовується для визначення значення, яке надсилається під час надсилання форми. Якщо в тегу пропущено атрибут value, використовується вміст заголовка.Вибрано:Він використовується для визначення попередньо вибраного вибору під час початкового завантаження форми у браузері.

Наведені нижче приклади використовуються для отримання вибраного значення зі спадного списку в 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 використовується для вибору кількох значень із розкривного списку.

Вихід:

Результат цього прикладу наведено нижче.