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 163 · Answer 1 · edited Mar 03 '18 at 09:15

163

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

6,451
11
52
82

answered Mar 24 '11 at 09:00

Hussein

41,814
25
111
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 80 · Answer 2 · edited Dec 02 '19 at 22:26

80

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,650
1
18
30

answered Jun 28 '16 at 22:04

Brandon G

2,523
2
24
24

YakovL · Answer 3 · 2019-04-06T23:25:22.253

Wow, no really reusable solutions among answers yet.. I mean, a standart 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 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

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

6,451
11
52
82

answered Sep 30 '12 at 13:59

el Dude

4,543
5
25
39

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 31 · 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

19

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,120
2
14
29

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 7 · Answer 7 · 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 7 · Answer 8 · answered Nov 13 '18 at 18:20

7

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

Alexander

1,818
22
22

score 7 · Answer 9 · 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,567
8
31
33

answered Mar 24 '11 at 09:02

CloudyMarble

36,156
70
93
127

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 10 · 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

score 6 · Answer 11 · edited Dec 01 '21 at 11:11

Why overcomplicate it:

var select = document.querySelector('[select#id.orClass]');
select.addEventListener('change', function() {
  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>

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 3 · Answer 13 · answered Aug 02 '18 at 08:39

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

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 0 · Answer 15 · 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;

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

0

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

31
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

score 0 · Answer 17 · answered Dec 01 '21 at 06:16

You can get it just using plain old easy and simple JavaScript .

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

 function test()
 {
  let order_details_id=document.getElementById('select_id').value;
  alert(select_id);
 }

score 0 · Answer 18 · answered Apr 15 '22 at 20:10

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 u can write console.log(number) inside this function to get Your selected value.


<!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>
    
   
    
    <script>
    function test(number){
    console.log(number)
    }
    
    </script>
    
    </body>
    </html>

Get selected value/text from Select on change

18 Answers18

Linked

Related