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">roma</option>
    <option value="totti">totti</option>
</select>

Then read it with:

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

Read the value when the user changes the dropdown

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

This is useful when you want to react immediately after the user picks a different option.

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 roma, the result becomes "roma".
6. console.log(result) prints that value.

Example trace

If the selected option is:

<option value="totti">totti</option>

then:

$("#aioConceptName").val()

returns:

"totti"

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);
});

Validation before form submission

$("form").on("submit", function (e) {
    if (!$("#aioConceptName").val()) {
        e.preventDefault();
        alert("Please select a concept name.");
    }
});

These patterns keep code easier to read and reduce form-related bugs.

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:

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

3. Reading the value before the DOM is ready

Broken example:

var value = $("#aioConceptName").val();

If this runs before the element exists, it may fail.

Use:

$(function () {
    var value = $("#aioConceptName").val();
    console.log(value);
});

4. Using the wrong selector

Broken example:

$("#aioConcept").val();

If the id is actually aioConceptName, this returns nothing useful.

5. Not handling the placeholder option

If your first option is a prompt like choose io, it may be selected by default.

Better:

<option value="">choose io</option>

Then check for empty value before continuing.

6. Confusing .text() and .val()

• .val() gets the selected option's value
• .text() on option:selected gets the visible label

.val() vs .text()

Implicit vs explicit option values

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">totti</option>
</select>

Important rules

• .val() returns the selected option's value
• If no value is written, the option text is used as the value
• Use option:selected with .text() to get visible text
• Placeholder options should usually have value=""
• Make sure your selector matches the correct id
• If needed, wait for DOM ready with $(function () { ... })

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($(this).val());
});

Can I use plain JavaScript instead of jQuery?

Yes. For example:

document.getElementById("aioConceptName").value

Why is adding explicit values a good idea?

It makes your code clearer, more maintainable, and safer when the display text changes later.

• 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.