Jquery: How To Get Selected Text From A Drop Down, Get Select'S Value And Text In Jquery

Option A Option B Option CWhat would the selector look like if I wanted to get "Option B" when I have the value "2"?

Please cảnh báo that this is not asking how khổng lồ get the selected text value, but just any one of them, whether selected or not, depending on the value attribute. I tried:

$("#list").text();But it is not working.Bạn đang xem: Jquery get specific option tag text



Highest score (default) Trending (recent votes count more) Date modified (newest first) Date created (oldest first)

Help us improve our answers.

Bạn đang xem: Jquery: how to get selected text from a drop down, get select's value and text in jquery

Are the answers below sorted in a way that puts the best answer at or near the top?

It"s looking for an element with id danh sách which has a property value equal lớn 2.What you want is the option child of the list:

$("#list option").text()



If you"d like to get the option with a value of 2, use

$("#list option").text();If you"d lượt thích to get whichever option is currently selected, use

$("#list option:selected").text();


This worked perfectly for me, I was looking for a way lớn send two different values with options generated by MySQL, and the following is generic và dynamic:


As mentioned in one of the comments. With this I was able to create a dynamic function that works with all my selection boxes that I want to lớn get both values, the option value & the text.

Few days ago I noticed that when updating the jQuery from 1.6 khổng lồ 1.9 of the site I used this code, this stop working... Probably was a conflict with another piece of code... Anyway, the solution was lớn remove option from the find() call:

$(this).find(":selected").text();That was my solution... Use it only if you have any problem after updating your jQuery.

You can get selected option text by using function .text();

you can hotline the function lượt thích this :

jQuery("select option:selected").text(); Based on the original HTML posted by Paolo I came up with the following.

If there is only one select tag in on the page then you can specify select inside of id "list"

jQuery("select option").text();To get selected text

jQuery("select option:selected").text(); Use:

function selected_state() jQuery("#list option").each(function() if(jQuery(this).val() == "2") jQuery(this).attr("selected","selected"); return false; );jQuery(document).ready(function() selected_state();); $("#list option:selected").each(function() alert($(this).text());); for multiple selected value in the #list element.

Xem thêm: thiết kế layout web bằng css

Try the following:

$("#list option").text();The reason why your original snippet wasn"t working is because your OPTION tags are children to lớn your SELECT tag, which has the id list.

A tip: you can use below code if your value is dynamic:

$("#list option").text();Or (better style)

$("#list option").filter(function() return this.value === aDynamicValue;).text();As mentioned in jQuery get specific option tag text & placing dynamic variable to lớn the value

You can get one of following ways

$("#list").find("option").filter("").text()$("#list").find("option").text()$("#list").children("option").text()$("#list option").text()$(function() console.log($("#list").find("option").filter("").text()); console.log($("#list").find("option").text()); console.log($("#list").children("option").text()); console.log($("#list option").text()); ); Option A Option B Option CThis is an old Question which has not been updated in some time the correct way to vì chưng this now would be lớn use

$("#action").on("change",function() alert($(this).find("option:selected").text()+" clicked!"););I hope this helps :-)

I needed this answer as I was dealing with a dynamically cast object, và the other methods here did not seem to work:

element.options.textThis of course uses the DOM object instead of parsing its HTML with nodeValue, childNodes, etc.

While "looping" through dynamically created select elements with a .each(function()...): $("option:selected").text(); and $(this + " option:selected").text() did not return the selected option text - instead it was null.

But Peter Mortensen"s solution worked:

$(this).find("option:selected").text();I vì chưng not know why the usual way does not succeed in a .each() (probably my own mistake), but thank you, Peter. I know that wasn"t the original question, but am mentioning it "for newbies coming through Google."

I would have started with $("#list option:selected").each() except I needed to grab stuff from the select element as well.

I was looking for getting val by internal field name instead of ID & came from google to lớn this post which help but did not find the solution I need, but I got the solution and here it is:

So this might help somebody looking for selected value with field internal name instead of using long id for SharePoint lists:

var e = $("select option:selected").text(); As an alternative solution, you can also use a context part of jQuery selector to find element(s) with value="2" inside the dropdown list:

$("option", "#list").text(); I wanted a dynamic version for select multiple that would display what is selected lớn the right (wish I"d read on and seen $(this).find... Earlier):

opt 1 opt 2 opt 3 opt 4 let text = .find(o=> o.value=="2").text;console.log(text); Option A Option B Option C Highly active question. Earn 10 reputation (not counting the association bonus) in order khổng lồ answer this question. The reputation requirement helps protect this question from spam và non-answer activity.

Not the answer you're looking for? Browse other questions tagged javascript jquery jquery-selectors html-select or ask your own question.

Your privacy

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.