How to Get the Selected Option from a Dropdown in jQuery

By the end of this page, you will understand how jQuery reads values from <select> dropdowns, when .val() works, how to get the selected option's text, and how to avoid common mistakes when working with form controls.

A <select> element lets a user choose one option from a list. In jQuery, the most common way to read the current selection is:

$("#aioConceptName").val()

This returns the value of the currently selected <option>.

If an <option> does not explicitly define a value attribute, the browser uses the option's text as its value. That means this HTML:

<option>roma</option>

behaves similarly to:

<option value="roma">roma</option>

This matters because developers often need one of two things:

• the option's value for processing or saving data
• the option's visible text for display purposes

In real programs, dropdowns are used in forms, filters, dashboards, settings pages, and admin tools. Knowing the difference between value and text helps prevent bugs and makes form handling more predictable.

Think of a dropdown like a labeled set of choices in a vending machine.

• The text is what the user sees on the button.
• The value is the internal code the machine uses.

Sometimes they are the same:

• text: roma
• value: roma

Sometimes they are different:

• text: AS Roma
• value: roma

jQuery's .val() gives you the machine's internal code. If you want the visible label, you read the selected option's text instead.

Get the selected value

var selectedValue = $("#aioConceptName").val();
console.log(selectedValue);

If the user selects roma, this prints:

roma

Get the selected text

var selectedText = $("#aioConceptName option:selected").text();
console.log(selectedText);

This also prints the visible text of the selected option.

Better HTML with explicit values

It is often clearer to define value attributes yourself:

<select id="aioConceptName">
    <option value="">choose io</option>
    <option value=>roma
    totti

Consider this example:

<select id="aioConceptName">
    <option value="">choose io</option>
    <option value="roma">roma</option>
    <option value="totti">totti</option>
</select>

var result = $("#aioConceptName").val();
console.log(result);

What happens step by step

1. jQuery looks for the element with id aioConceptName.
2. It finds the <select> element.
3. .val() reads the currently selected option.
4. If the first option is still selected, the result is an empty string "" because its value is empty.
5. If the user selects , the result becomes .

Dropdown selection is used in many practical cases:

• Form submission: getting a selected country, category, or role
• Filtering data: selecting a product type or status in a dashboard
• Settings pages: choosing a theme, language, or timezone
• Search interfaces: narrowing results by sort order or tag
• Admin panels: selecting users, permissions, or content states

Example: filter a list when a dropdown changes.

$("#statusFilter").on("change", function () {
    var status = $(this).val();
    console.log("Filtering by:", status);
});

In real projects, developers usually combine dropdown reading with validation and event handling.

Common patterns

Guard clause for placeholder options

var value = $("#aioConceptName").val();
if (!value) {
    console.log("Please choose an option.");
    return;
}

This avoids processing an empty placeholder value.

Reading text and value separately

var value = $("#aioConceptName").val();
var text = $("#aioConceptName option:selected").text();

Useful when you store the value but display the label.

Change-driven UI updates

$("#aioConceptName").on("change", function () {
    var selected = $(this).val();
    $("#output").text("Selected: " + selected);
});

1. Expecting text when .val() returns value

If your option has different text and value:

<option value="roma">AS Roma</option>

then this:

$("#aioConceptName").val()

returns:

"roma"

not AS Roma.

Use this for text:

$("#aioConceptName option:selected").text()

2. Forgetting to add value attributes

This is valid:

<option>roma</option>

but it can be less explicit. Prefer:

.val() vs .text()

Quick reference

Get selected value

$("#aioConceptName").val()

Get selected text

$("#aioConceptName option:selected").text()

Run code when selection changes

$("#aioConceptName").on("change", function () {
    console.log($(this).val());
});

Recommended HTML

<select id="aioConceptName">
    <option value="">choose io</option>
    <option value="roma">roma</option>
    <option value=>totti

Why does .val() sometimes seem not to work on a dropdown?

Usually the issue is not .val() itself. Common causes are using the wrong selector, running the code before the element exists, or expecting the visible text instead of the value.

How do I get the selected option text instead of the value in jQuery?

Use:

$("#aioConceptName option:selected").text()

Do <option> elements need a value attribute?

No, but it is strongly recommended. Without it, the browser uses the option text as the value.

What does .val() return if the first placeholder option is selected?

It returns that option's value. If you set value="", it returns an empty string.

How can I detect when the user changes the dropdown?

Use the change event:

$("#aioConceptName").on("change", function () {
    console.log($().());
});

• HTML forms — Dropdowns are a core part of form input handling.
• jQuery selectors — You need correct selectors like #id and option:selected to target elements.
• DOM ready — Code often needs to wait until elements exist before reading values.
• Form validation — Selected values are commonly checked before submission.
• Event handling — The change event is the standard way to react to dropdown updates.
• JavaScript DOM manipulation — jQuery is built on common DOM concepts such as reading values and updating the page.
• Input value vs displayed text — Understanding this difference helps with all form controls, not just dropdowns.