Get selected value/text from Select on change

Question

<select onchange="test()" id="select_id">
    <option value="0">-Select-</option>
    <option value="1">Communication</option>
</select>

I need to get the value of the selected option in javascript: does anyone know how to get the selected value or text, please tell how to write a function for it. I have assigned onchange() function to select so what do i do after that?

Here: http://stackoverflow.com/questions/1085801/how-to-get-selected-value-of-dropdownlist-using-javascript and here: http://stackoverflow.com/questions/4029281/get-drop-down-value — Mika, Mar 24 '11 at 08:59
If you only want the `value` of the `option` that was selected then... ``... should get ya just that and nothing more. — S0AndS0, Jun 07 '19 at 23:38

score 179 · Answer 1 · edited Mar 03 '18 at 09:15

179

Use either JavaScript or jQuery for this.

Using JavaScript

<script>
function val() {
    d = document.getElementById("select_id").value;
    alert(d);
}
</script>

<select onchange="val()" id="select_id">

Using jQuery

$('#select_id').change(function(){
    alert($(this).val());
})

edited Mar 03 '18 at 09:15

YakovL

7,557
12
62
102

answered Mar 24 '11 at 09:00

Hussein

42,480
25
113
143

1

.value() works on modern browsers but not on really old ones. See http://bytes.com/topic/javascript/answers/90872-how-get-selected-value-select-using-dom – Benissimo Jan 14 '13 at 14:21
4

@PlayHardGoPro That is the selected value. If you wanted the text (e.g. -Select- or Communication) you would use text: `select.text` or in jQuery `select.text()`. – ricksmt Sep 16 '13 at 17:01
Using jQuery `$('#select_id option:selected').text()` .This will return the text of the option selected, _Select_ or _Communication_ – Paulo Borralho Martins Dec 07 '16 at 09:38
6

vanilla javascript approach: ```document.getElementById("select_id").onchange = (evt) => { console.log(evt.srcElement.value); }``` – Spencer Aug 13 '18 at 18:00
I would not rely on `getElementById` as you can potentially use the same method for different selects. I'd look at the answer proposed by YakovL if that is what you are looking for. – Diana Vallverdu Dec 26 '21 at 11:03

score 101 · Answer 2 · edited Dec 02 '19 at 22:26

101

If you're googling this, and don't want the event listener to be an attribute, use:

document.getElementById('my-select').addEventListener('change', function() {
  console.log('You selected: ', this.value);
});

<select id="my-select">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

edited Dec 02 '19 at 22:26

Tom Faltesek

2,768
1
19
30

answered Jun 28 '16 at 22:04

Brandon G

2,733
3
25
24

4

In certain cases where function scope changes, `this` doesn't work. Better do `const mySelect = document.getElementById('my-select'); mySelect.addEventListener('change', function() { console.log('You selected: ', mySelect.value);});` – João Pimentel Ferreira Jul 29 '22 at 11:08
Doesn't work for arrow functions – R.S.K Feb 22 '23 at 09:36

YakovL · Answer 3 · 2023-03-16T15:56:42.673

Wow, no really reusable solutions among answers yet.. I mean, a standard event handler should get only an event argument and doesn't have to use ids at all.. I'd use:

function handleSelectChange(event) {

    // if you want to support some really old IEs, add
    // event = event || window.event;

    var selectElement = event.target;

    var value = selectElement.value;
    // to support really old browsers, you may use
    // selectElement.value || selectElement.options[selectElement.selectedIndex].value;
    // like el Dude has suggested

    // do whatever you want with the value
}

You may use this handler with each – inline js:

<select onchange="handleSelectChange(event)">
    <option value="1">one</option>
    <option value="2">two</option>
</select>

jQuery:

jQuery('#select_id').on('change',handleSelectChange);

or vanilla JS handler setting:

var selector = document.getElementById("select_id");
selector.onchange = handleSelectChange;
// or
selector.addEventListener('change', handleSelectChange);

And don't have to rewrite this for each select element you have.

Example snippet:

function handleSelectChange(event) {

    var selectElement = event.target;
    var value = selectElement.value;
    alert(value);
}

<select onchange="handleSelectChange(event)">
    <option value="1">one</option>
    <option value="2">two</option>
</select>

Great solution, should be accepted. Using pure event element, without referencing DOM document is the most flexible way which works in many environments like React, Vue or just plain HTML forms. — VanDavv, Mar 21 '18 at 09:44
Great solution thanks. But I think its not an event that is send, but simply the document object model of the select tag — Adam, Nov 19 '22 at 20:32
Hey @Adam, `event.target` is the DOM represenation of the `select` element, but it's not clear what do you mean by "send" anyway (and for which approach), so I can't provide you a definitive link. You can try to `console.log` the argument and see the type yourself in your case — YakovL, Nov 20 '22 at 09:20

score 39 · Answer 4 · edited Apr 08 '19 at 13:22

39

function test(a) {
    var x = (a.value || a.options[a.selectedIndex].value);  //crossbrowser solution =)
    alert(x);
}

<select onchange="test(this)" id="select_id">
    <option value="0">-Select-</option>
    <option value="1">Communication</option>
    <option value="2">Communication</option>
    <option value="3">Communication</option>
</select>

edited Apr 08 '19 at 13:22

YakovL

7,557
12
62
102

answered Sep 30 '12 at 13:59

el Dude

5,003
5
28
40

what is `a.value` for? Is there any browsers that actually support such? can't we just use `a.options[a.selectedIndex].value`? – Anonymous Nov 19 '12 at 20:25
@Anonymous< to get the subj =) – el Dude Nov 20 '12 at 16:28

score 32 · Answer 5 · answered Oct 06 '12 at 19:40

No need for an onchange function. You can grab the value in one line:

document.getElementById("select_id").options[document.getElementById("select_id").selectedIndex].value;

Or, split it up for better readability:

var select_id = document.getElementById("select_id");

select_id.options[select_id.selectedIndex].value;

Russell Strauss · Answer 6 · 2020-01-15T19:23:59.907

18

let dropdown = document.querySelector('select');
if (dropdown) dropdown.addEventListener('change', function(event) {
    console.log(event.target.value);
});

edited Jan 15 '20 at 19:23

answered Sep 25 '19 at 20:44

Russell Strauss

1,160
3
14
30

This approach is helpful if you are working with arrow functions. – Franchy Dec 27 '19 at 16:25
any arrow function can be replaced with function() {}, it's the same thing – Russell Strauss Oct 08 '20 at 13:09
it isn't the same. `this` in an arrow function gets its context from its lexical environment but the normal function has its own this. Check [this](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) – Franchy Oct 12 '20 at 20:44
1

Ah yes, I see what you mean. You can store this in a variable outside the anonymous function to ensure you can get the correct scope you need – Russell Strauss Aug 25 '21 at 20:04

score 9 · Answer 7 · answered Nov 13 '18 at 18:20

9

HTML:

<select onchange="cityChanged(this.value)">
      <option value="CHICAGO">Chicago</option>
      <option value="NEWYORK">New York</option>
</select>

JS:

function cityChanged(city) {
    alert(city);
}

answered Nov 13 '18 at 18:20

Alex

1,986
22
23

score 8 · Answer 8 · answered Mar 03 '18 at 09:51

I wonder that everyone has posted about value and text option to get from <option> and no one suggested label.

So I am suggesting label too, as supported by all browsers

To get value (same as others suggested)

function test(a) {
var x = a.options[a.selectedIndex].value;
alert(x);
}

To get option text (i.e. Communication or -Select-)

function test(a) {
var x = a.options[a.selectedIndex].text;
alert(x);
}

OR (New suggestion)

function test(a) {
var x = a.options[a.selectedIndex].label;
alert(x);
}

HTML

<select onchange="test(this)" id="select_id">
    <option value="0">-Select-</option>
    <option value="1">Communication</option>
    <option value="2" label=‘newText’>Communication</option>
</select>

Note: In above HTML for option value 2, label will return newText instead of Communication

Also

Note: It is not possible to set the label property in Firefox (only return).

score 8 · Answer 9 · edited Oct 11 '22 at 02:16

Why overcomplicate it:

var select = document.querySelector('select#id.orClass');
select.addEventListener('change', function(e) {
  console.log(select.value);

  // or if it changes dynamically
  console.log(e.target.value);      
});

 let select = document.getElementById('select_id');
  select.addEventListener('change', function() {
    console.log(select.value);
    // just for test
    alert(select.value);
  });

<select id="select_id">
    <option value="0">-Select-</option>
    <option value="1">Communication</option>
</select>

score 7 · Answer 10 · edited Apr 08 '16 at 12:54

7

Use

document.getElementById("select_id").selectedIndex

Or to get the value:

document.getElementById("select_id").value

edited Apr 08 '16 at 12:54

Jonathan Argentiero

5,687
8
29
34

answered Mar 24 '11 at 09:02

CloudyMarble

36,908
70
97
130

this way of getting the value won't work in old browsers, use Danny's solution instead – wlf Feb 28 '13 at 12:03

score 6 · Answer 11 · edited Mar 03 '18 at 09:13

<script>
function test(a) {
    var x = a.selectedIndex;
    alert(x);
}
</script>
<select onchange="test(this)" id="select_id">
    <option value="0">-Select-</option>
    <option value="1">Communication</option>
    <option value="2">Communication</option>
    <option value="3">Communication</option>
</select>

in the alert you'll see the INT value of the selected index, treat the selection as an array and you'll get the value

Mohammad Ali Abdullah · Answer 12 · 2021-04-24T08:36:27.960

        $('#select_id').change(function(){
        // selected value 
        alert($(this).val());
        // selected text 
        alert($(this).find("option:selected").text());
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<select onchange="test()" id="select_id">
        <option value="0">-Select-</option>
        <option value="1">Communication</option>
    </select>

score 4 · Answer 13 · answered Aug 02 '18 at 08:39

4

This is an old question, but I am not sure why people didn't suggest using the event object to retrieve the info instead of searching through the DOM again.

Simply go through the event object in your function onChange, see example bellow

function test() { console.log(event.srcElement.value); }

http://jsfiddle.net/Corsico/3yvh9wc6/5/

Might be useful to people looking this up today if this wasn't default behavior 7 years ago

answered Aug 02 '18 at 08:39

Vlad Pintea

813
8
24

well.. some did :) https://stackoverflow.com/a/47495878/3995261 – YakovL Oct 13 '22 at 09:29

score 2 · Answer 14 · answered May 22 '18 at 06:29

function test(){
  var sel1 = document.getElementById("select_id");
  var strUser1 = sel1.options[sel1.selectedIndex].value;
  console.log(strUser1);
  alert(strUser1);
  // Inorder to get the Test as value i.e "Communication"
  var sel2 = document.getElementById("select_id");
  var strUser2 = sel2.options[sel2.selectedIndex].text;
  console.log(strUser2);
  alert(strUser2);
}

<select onchange="test()" id="select_id">
  <option value="0">-Select-</option>
  <option value="1">Communication</option>
</select>

score 2 · Answer 15 · edited Jun 27 '22 at 16:35

2

In html

(change)="onChangeCategory($event)"

In javascript/typescript

onChangeCategory(event: any) {
    console.log(event.target.options[event.target.selectedIndex].value);
    console.log(event.target.options[event.target.selectedIndex].text);
}

edited Jun 27 '22 at 16:35

Lee Taylor

7,761
16
33
49

answered Jun 22 '22 at 09:41

Sani

81
4

score 1 · Answer 16 · edited Oct 13 '22 at 09:32

You can get the value from the select element by passing "this.value" as a parameter to your function named test(this.value) and after that You should create the function with a parameter inside the script element and finally you can write console.log(number) inside this function to get Your selected value.

function test(number) {
  console.log(number)
}

<!DOCTYPE html>
<html>

<body>

  <p>Select a new car from the list.</p>
  <select onchange="test(this.value)" id="select_id">
    <option value="0">-Select-</option>
    <option value="1">Communication</option>
  </select>

</body>

</html>

score 0 · Answer 17 · edited Mar 03 '18 at 09:12

function test(){
  var sel1 = document.getElementById("select_id");
  var strUser1 = sel1.options[sel1.selectedIndex].value;
  console.log(strUser1);
  alert(strUser1);
  // Inorder to get the Test as value i.e "Communication"
  var sel2 = document.getElementById("select_id");
  var strUser2 = sel2.options[sel2.selectedIndex].text;
  console.log(strUser2);
  alert(strUser2);
}

<select onchange="test()" id="select_id">
  <option value="0">-Select-</option>
  <option value="1">Communication</option>
</select>

var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;

score 0 · Answer 18 · answered Sep 01 '22 at 08:24

0

You set the onchange handler to some function or string. In it, you write code to get value

document.getElementById('cphForm_ddlFacility').value;

or, for older browsers

document.getElementById('cphForm_ddlFacility')[document.getElementById('cphForm_ddlFacility').selectedIndex].value

answered Sep 01 '22 at 08:24

Beauty Of Salvation In Christ

13
1
13

I don't mean to be offensive, but are you sure it's a good idea to still suggest using id while a handler can use `event.target` instead (https://stackoverflow.com/a/47495878/3995261)? – YakovL Dec 19 '22 at 13:38

score 0 · Answer 19 · answered Dec 02 '22 at 03:21

Once the onChange is invoked you can add either JS or JQuery Code Snippet to get your thought working.

//Javascript

document.getElementById("select_id").selectedIndex // prints text value of the option
document.getElementById("select_id").value // prints the value of the option 

//JQUERY 

var selected = $('#select_id option:selected').val(); 
// prints the **value** of the option clicked in the dropdown
    
var selected = $('#select_id option:selected').html(); 
// prints the **text** of the option clicked in the dropdown

I don't mean to be offensive, but are you sure it's a good idea to still suggest using id while a handler can use `event.target` instead (https://stackoverflow.com/a/47495878/3995261)? — YakovL, Dec 19 '22 at 13:37

Ayaz · Answer 20 · 2018-12-16T21:37:25.357

-1

I have tried to explain with my own sample, but I hope it will help you. You don't need onchange="test()" Please run code snippet for getting a live result.

document.getElementById("cars").addEventListener("change", displayCar);

function displayCar() {
  var selected_value = document.getElementById("cars").value;
  alert(selected_value);
}

<select id="cars">
  <option value="bmw">BMW</option>
  <option value="mercedes">Mercedes</option>
  <option value="volkswagen">Volkswagen</option>
  <option value="audi">Audi</option>
</select>

edited Dec 16 '18 at 21:37

answered Jul 07 '18 at 21:24

Ayaz

39
6

On change is much better than a click event as it isn't cancerous to select an option. – Riley Carney Nov 06 '18 at 21:50
@RileyCarney well, it depends, instead of changing refactoring code on ui part upon function name change on js part, it is more elegant, and btw i didn't see any click event. – Dec 16 '18 at 21:48
You edited it to remove the onclick event haha. So shady, before you were doing on click which did the notification if you clicked on it for the car. `edited 7 hours ago` At least you fixed the code which didn't work well. – Riley Carney Dec 17 '18 at 05:20

Get selected value/text from Select on change

20 Answers20

Linked

Related