Introduction

In jQuery, the simplest way to get the selected option from a dropdown is usually $("#mySelect").val(). If you also need the displayed text or custom attributes from the selected option, use find("option:selected") and then read the properties from that element.

HTML Example

Start with a normal select element:

1<select id="fruit-dropdown">
2  <option value="apple">Apple</option>
3  <option value="banana">Banana</option>
4  <option value="cherry">Cherry</option>
5</select>

The selected option has two pieces of information developers commonly need:

• the value
• the visible text

Get the Selected Value with .val()

If you only want the selected value, .val() is the cleanest answer:

1$("#fruit-dropdown").on("change", function () {
2  const selectedValue = $(this).val();
3  console.log(selectedValue);
4});

If the selected option is banana, the output is:

banana

That is enough for many form-handling tasks.

Get the Selected Option Element

If you need more than the value, fetch the selected option element itself:

1$("#fruit-dropdown").on("change", function () {
2  const selectedOption = $(this).find("option:selected");
3  const selectedValue = selectedOption.val();
4  const selectedText = selectedOption.text();
5
6  console.log(selectedValue);
7  console.log(selectedText);
8});

This is the pattern to use when you need the visible label or more attributes from the selected option.

Read Custom Data Attributes

If options carry extra metadata, option:selected is especially useful.

1<select id="fruit-dropdown">
2  <option value="apple" data-color="red">Apple</option>
3  <option value="banana" data-color="yellow">Banana</option>
4  <option value="cherry" data-color="dark-red">Cherry</option>
5</select>

1$("#fruit-dropdown").on("change", function () {
2  const selectedOption = $(this).find("option:selected");
3  const color = selectedOption.data("color");
4
5  console.log(color);
6});

That is often cleaner than creating parallel lookup tables in JavaScript.

Get the Current Selection Immediately

You do not have to wait for a change event. If the dropdown already has a selected item and you want to read it on page load, just query it directly:

1const currentValue = $("#fruit-dropdown").val();
2const currentText = $("#fruit-dropdown option:selected").text();
3
4console.log(currentValue, currentText);

This is useful for prefilled forms or server-rendered pages.

Dynamic Dropdowns and Delegated Events

If the dropdown is added to the page later, binding directly to it at startup may miss the event. In that case, delegate from a stable ancestor:

1$(document).on("change", "#fruit-dropdown", function () {
2  const selectedValue = $(this).val();
3  console.log(selectedValue);
4});

This pattern matters in applications that render form controls dynamically through Ajax or client-side templates.

Multi-Select Dropdowns

If the select allows multiple selections, .val() returns an array of selected values instead of one string.

1<select id="tags" multiple>
2  <option value="java">Java</option>
3  <option value="python">Python</option>
4  <option value="go">Go</option>
5</select>

const values = $("#tags").val();
console.log(values);

That distinction matters when you reuse the same handler for single-select and multi-select elements.

Common Pitfalls

• Using .text() on the select element instead of the selected option returns more text than expected.
• Assuming .val() always returns a string is incorrect for multi-select dropdowns, where it can return an array.
• Reading custom metadata from the select instead of the selected option gives the wrong element.
• Forgetting that the handler runs only on change can make a preselected value look missing until the user interacts.
• Mixing raw DOM APIs and jQuery inconsistently makes simple code harder to read than it needs to be.

Summary

• Use $("#dropdown").val() when you only need the selected value.
• Use $("#dropdown option:selected") or .find("option:selected") when you need text or attributes.
• Read custom metadata with .data() from the selected option.
• Query the dropdown directly on page load if you need the current selection before any change event.
• Be careful with multi-select elements because the return type from .val() changes.