193
<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?

2

19 Answers 19

188

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());
})
5
  • 1
    .value() works on modern browsers but not on really old ones. See bytes.com/topic/javascript/answers/…
    – Benissimo
    Commented Jan 14, 2013 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
    Commented Sep 16, 2013 at 17:01
  • Using jQuery $('#select_id option:selected').text() .This will return the text of the option selected, Select or Communication Commented Dec 7, 2016 at 9:38
  • 6
    vanilla javascript approach: document.getElementById("select_id").onchange = (evt) => { console.log(evt.srcElement.value); }
    – Spencer
    Commented Aug 13, 2018 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. Commented Dec 26, 2021 at 11:03
112

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>

2
  • 5
    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);}); Commented Jul 29, 2022 at 11:08
  • 1
    Doesn't work for arrow functions
    – RSK
    Commented Feb 22, 2023 at 9:36
62

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>

3
  • 3
    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
    Commented Mar 21, 2018 at 9: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
    Commented Nov 19, 2022 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
    Commented Nov 20, 2022 at 9:20
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>

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

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;
18
let dropdown = document.querySelector('select');
if (dropdown) dropdown.addEventListener('change', function(event) {
    console.log(event.target.value);
});
4
  • This approach is helpful if you are working with arrow functions.
    – Franchy
    Commented Dec 27, 2019 at 16:25
  • any arrow function can be replaced with function() {}, it's the same thing Commented Oct 8, 2020 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
    – Franchy
    Commented Oct 12, 2020 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 Commented Aug 25, 2021 at 20:04
9

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

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

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>

7

Use

document.getElementById("select_id").selectedIndex

Or to get the value:

document.getElementById("select_id").value
1
  • this way of getting the value won't work in old browsers, use Danny's solution instead
    – wlf
    Commented Feb 28, 2013 at 12:03
7
<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

6

        $('#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>

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

1
4

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

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>

1

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>

1

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
1
  • 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 (stackoverflow.com/a/47495878/3995261)?
    – YakovL
    Commented Dec 19, 2022 at 13:37
0

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;
-1

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
1
  • 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 (stackoverflow.com/a/47495878/3995261)?
    – YakovL
    Commented Dec 19, 2022 at 13:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.