Get Selected Value in Drop-down in jQuery.

In this article, we will learn how to get selected values in the drop-down list with the help of jQuery. First of all, we will understand this article using jQuery, jQuery selector, and jQuery val () method. After that, we will understand this topic with the help of various examples.

What do you mean by jQuery?

jQuery is a fast, lightweight, small, and feature-rich JavaScript library.

<script src ="https://code.jquery.com/jquery-3.5.1.min.js">

</script>

Use the jQuery: selected selector in combination with val () method to find the selected option value in a drop-down list.

The selector in jQuery:

It is an HTML element in which the declaration is applied.

For Example: selected, checked, etc.

Selected is used to specify the default choice when the form is initially loaded.

val () method in jQuery:

This method is used to get the values of form elements or set the value of attribute used for the selected elements.

Syntax:

Example:

Dropdown list with <select> and <option> tag.

The select and option tags are used to create drop-down menus. They allow the user to select single or multiple choices from a list of options. All the choices are not shown on the screen, but they are visible when they pull the drop-down list. They are used to save space as only one item of the list is displayed.

For creating Pull down lists, <select> tag is used instead of <input> tag. The paired tag starts with the opening <select> tag and ends with the closing tag </select>. This tag has to be used with the <option> tag.

Syntax:

The various attributes used with the <select> tag are:

• Multiple: It is used to set the <select> tag to accept numerous options. By default, it can take a single option selected by the user. To select multiple options, a user has to press click while clicking the option.
• Name: It is used to specify a name for the pull-down list.

The various attributes used with <option> tag are:

• Value: It is used to specify the value that is sent when the form is submitted. If the value attribute is omitted in the <option> tag, then the <option> title contents are used.
• Selected: It is used to specify the preselected choice when the form is initially loaded in a browser.

The following examples are used to get the selected value from the drop-down list in jQuery.

Example 1:

How to get selected value from drop-down list in jQuery.

Explanation:

In the above example, we have created a drop-down list with the help of <select> and <option> tag. Suppose we select a particular value from the <option> list value and after selecting the element from the <option> list. In that case, it will display an alert message with the selected element from the drop-down list.

In this example, we will display the <option value ="germany">

Output:

The output of this example is given below.

Example 2:

How to get selected value from drop-down list in jQuery.

Explanation:

In the above example, we have created a drop-down list with the help of <select> and <option> tag. If we select a particular value from the <option> list and select the element from the <option> list, it will display an alert message with the selected element from the drop-down list.

In this example, we will display the <option> India </option>.

Output:

The output of this example is given below.

Example 3:

How to get multiple values from a drop-down list in jQuery.

Explanation:

In the above example, we have created a drop-down list with the help of <select> and <option> tag. In this, if we select a multiple value from the <option> list and create a <button> after selecting the multiple element from the <option> list and we click a button it displays an alert message with the selected element from the drop-down list.

Here, <select class="country" multiple="multiple" size="3">

Size ="3" is used to display the number of elements shown in the drop-down list, multiple is used to select multiple values from the drop-down list.

Output:

The output of this Example is given below.