How to get the text and value from a dropdown in Javascript

Question

I have a very basic question. I want to select the SELECTED text and dropdown value from the dropdown and show in the alert box.

My attempt:

Dropdown

<p id="test">
  Select a draft:
  <select id="Select" name="Select">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</p>

JS

$("#Select").change(function()
{
    alert($(this).val()); // IF THIS WORKS FINE THEN NEXT LINE CODE SHOULD WORK TOO
    alert($(this).text()); // WHY THIS SHOWS ALL THE DROPDOWN TEXTS
    alert($("#Select option:selected").text()); // THIS JUST WORKS FINE
});

Question 1: What $(this) signifies? If it's signifies selected element then it should show the text also when doing $(this).text(). BUT IT DOESN'T work as expected.

Question 2: If I need to select the value and text of the dropdown is above mentioned is the efficient way to go about it.

Please guide me.

My JSFIDDLE Attempt

Why a negative vote. I have added my fiddle attempt and also I have added my doubts — Unbreakable, Jul 28 '17 at 13:50
no, $("this") targets all DOM elements named "this" which do not exist. You certainly mean $(this) — Salketer, Jul 28 '17 at 13:50
I want some moderator to tag in this question and ask for the reason for negative votes! — Unbreakable, Jul 28 '17 at 14:07
Ah comon, man up... What will it change? You're just becoming annoying now. That's only two points. And you got 8 answers anyways!! It's not as if it harmed you in any way. Actually, I'm tempted to downvote too... Just because you care ;) — Salketer, Jul 28 '17 at 14:12

score 3 · Accepted Answer · answered Jul 28 '17 at 13:52

3

In your change event handler, $(this) is the <select> element.

The element represented by $(this) depends on the context where it is used.
It usually is the element which triggered an event (like here), or the element targeted by the iteration of an .each() loop, for example.

When an <option> is selected, the <select> take its selected option value as a value...
It doesn't do it for the text of the selected option.

So that is why the second alert() statement doesn't work.

answered Jul 28 '17 at 13:52

Louys Patrice Bessette

33,375
6
36
64

1

Accepted your answer because of this line `When an – Unbreakable Jul 28 '17 at 14:09
Thanks for clarifying it. – Unbreakable Jul 28 '17 at 14:10

score 2 · Answer 2 · answered Jul 28 '17 at 13:49

The keyword this in your example represents the element on which the event triggered. This means the select element. .text() return all text included in the element, so it gives all elements. .val() returns the value of an input, in this case it will return the value of the select, but beware as it does not return more than one value if you set mutiple=true.

Since we now know that .text() returns the text, and this is the input that changed, we can deduct that you'd prefer using .val() to get the value as it may differ from the display text.

alert($(this).find("option:selected").val());

bcngr · Answer 3 · 2017-07-28T14:13:13.657

2

$(this) is used to make the this object a JQuery object which includes some extra functionality.

You can try this if you want to get the selected item value and text:

$(this).find(":selected").val(); // Gets the value of the selected option, if the value attribute in the option element is null it will give you the text

$(this).find(":selected").text(); // Gets the text of the selected option

edited Jul 28 '17 at 14:13

answered Jul 28 '17 at 13:52

bcngr

745
6
13

score 1 · Answer 4 · answered Jul 28 '17 at 13:49

hi the 'this' part is the raw DOM element from javascript $(this) makes it a jquery object, so you can use jquery. In this case it's the select.

If I need to select the value and text of the dropdown is above mentioned is the efficient way to go about it. Yes it's fine. jQuery get specific option tag text

ADreNaLiNe-DJ · Answer 5 · 2017-07-28T13:52:28.623

Answer to question 1:

$(this) means that you pass this to the $ function. In other words, you create a jQuery object from the this object. In your context, this refers to the elements matching the #Select selector: your select element.

$(this).text() is working normally because internally it calls innerText on the select tag: which contains the DOM code of your select and innerText contains all the text (not HTML) of the children of the select.

Answer to question 2:

To retreive the label of the selected option: $("#Select option:selected").text()

To retreive the value of the selected option: $("#Select option:selected").val()

@Unbreakable Why this comment on my answer ? – ADreNaLiNe-DJ Jul 28 '17 at 13:53 — ADreNaLiNe-DJ, Jul 28 '17 at 13:53

score 1 · Answer 6 · answered Jul 28 '17 at 13:53

You can alter what you already have written by changing this:

 alert($(this).val() + $(this).text());

to:

 alert($(this).val() + $("option:selected", this).text());

And overall giving you the code you already have.

$("#Select").change(function()
 {
     alert($(this).val() + $("option:selected", this).text());

     alert($("#Select option:selected").text());
});

$(this) is just selecting the identified object that you are choosing to use 'change' on which in this case is the select box.

score 1 · Answer 7 · answered Jul 28 '17 at 13:55

$("#Select").change(function() binds the function defined after this point to the HTML element <select id="Select" name="Select">. Therefore within that function, $(this) refers to that Select element. The information within that select element is: <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option>. This is why $(this).text() will give you all the options; you're asking for all the text inside that element.

($this).val() gets you the value of the overall select element, which is the text of the currently selected option.

score 1 · Answer 8 · answered Jul 28 '17 at 13:56

this refers to the context which was used to invoke the function. When you change the select option, this refers to the whole select dropdown.

If you look below, when I print the value of $(this).val, it gives the function which returns the value of the selected option.

Whereas, when I print the value of $(this).text, it gives the function which gives the whole select dropdown inner text.

To answer your second question, I think $(this).val() is more efficient as by using $(this) will always refer to the context which invokes the function. Thus, you can create modular code using it, by separating the use of anonymous function into a named function and using it for other select dropdown in your site, if you want in the future.

$("#Select").change(function()
{
    console.log($(this).val);
    
    console.log($(this).text);
    console.log($(this).val()); // IF THIS WORKS FINE THEN NEXT LINE CODE SHOULD WORK TOO
    console.log($(this).text()); // WHY THIS SHOWS ALL THE DROPDOWN TEXTS
    console.log($("#Select option:selected").text()); // THIS JUST WORKS FINE
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="test">
  Select a draft:
  <select id="Select" name="Select">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</p>

How to get the text and value from a dropdown in Javascript

8 Answers8