Get selected value/text from Select on change

Javascript

Javascript Problem Overview

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

Javascript Solutions

Solution 1 - Javascript

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

Solution 2 - Javascript

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>

Solution 3 - Javascript

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>

Solution 4 - Javascript

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>

Solution 5 - Javascript

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;

Solution 6 - Javascript

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

Solution 7 - Javascript

Use

document.getElementById("select_id").selectedIndex

Or to get the value:

document.getElementById("select_id").value

Solution 8 - Javascript

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

Solution 9 - Javascript

HTML:

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

JS:

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

Solution 10 - Javascript

<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

Solution 11 - Javascript

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

Solution 12 - Javascript

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>

Solution 13 - Javascript

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

Solution 14 - Javascript

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>

Solution 15 - Javascript

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;

Solution 16 - Javascript

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>

Solution 17 - Javascript

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

Solution 18 - Javascript

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>
Categories
Recommended Javascript Solutions

Previous Solution:

Remove and Replace Printed items

PythonPython 3.xPrintingPython 3.2

Next Solution:

How to check if a function exists in a SQL database?

SqlSql ServerSql Function

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionSiva View Question on Stackoverflow
Solution 1 - JavascriptHusseinView Answer on Stackoverflow
Solution 2 - JavascriptBrandon GView Answer on Stackoverflow
Solution 3 - JavascriptYakovLView Answer on Stackoverflow
Solution 4 - Javascriptel DudeView Answer on Stackoverflow
Solution 5 - JavascriptDannyView Answer on Stackoverflow
Solution 6 - JavascriptRussell StraussView Answer on Stackoverflow
Solution 7 - JavascriptCloudyMarbleView Answer on Stackoverflow
Solution 8 - JavascriptSSDView Answer on Stackoverflow
Solution 9 - JavascriptAlexanderView Answer on Stackoverflow
Solution 10 - JavascriptMiPnamicView Answer on Stackoverflow
Solution 11 - JavascriptMohammad Ali AbdullahView Answer on Stackoverflow
Solution 12 - JavascriptOZZIEView Answer on Stackoverflow
Solution 13 - JavascriptVlad PinteaView Answer on Stackoverflow
Solution 14 - JavascriptsamznaView Answer on Stackoverflow
Solution 15 - JavascriptVishnu S BabuView Answer on Stackoverflow
Solution 16 - JavascriptAyazView Answer on Stackoverflow
Solution 17 - JavascriptNavidView Answer on Stackoverflow
Solution 18 - JavascriptOmarsSaadeView Answer on Stackoverflow