Get selected value text from Select on change

Question

lt select onchange  test    id  select id  gt       lt option value  0  gt -Select- lt  option gt       lt option value  1  gt Communication lt  option gt   lt  select gt    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

User · Answer

Use   document getElementById  select id   selectedIndex   Or to get the value   document getElementById  select id   value

User · Answer

x000D   x000D  function test    x000D    var sel1   document getElementById  select id    x000D    var strUser1   sel1 options sel1 selectedIndex  value  x000D    console log strUser1   x000D    alert strUser1   x000D       Inorder to get the Test as value i e  Communication  x000D    var sel2   document getElementById  select id    x000D    var strUser2   sel2 options sel2 selectedIndex  text  x000D    console log strUser2   x000D    alert strUser2   x000D    x000D   lt select onchange  test    id  select id  gt  x000D     lt option value  0  gt -Select- lt  option gt  x000D     lt option value  1  gt Communication lt  option gt  x000D   lt  select gt  x000D   x000D   x000D    var e   document getElementById  ddlViewBy    var strUser   e options e selectedIndex  value

User · Answer

x000D   x000D  function test a    x000D      var x    a value    a options a selectedIndex  value      crossbrowser solution    x000D      alert x   x000D    x000D   lt select onchange  test this   id  select id  gt  x000D       lt option value  0  gt -Select- lt  option gt  x000D       lt option value  1  gt Communication lt  option gt  x000D       lt option value  2  gt Communication lt  option gt  x000D       lt option value  3  gt Communication lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

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

User · Answer

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    lt select onchange  handleSelectChange event   gt       lt option value  1  gt one lt  option gt       lt option value  2  gt two lt  option gt   lt  select gt    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    x000D   x000D  function handleSelectChange event    x000D   x000D      var selectElement   event target  x000D      var value   selectElement value  x000D      alert value   x000D    x000D   lt select onchange  handleSelectChange event   gt  x000D       lt option value  1  gt one lt  option gt  x000D       lt option value  2  gt two lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

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

User · Answer

let dropdown   document querySelector  select    if  dropdown  dropdown addEventListener  change   function event        console log event target value

User · Answer

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    x000D   x000D  document getElementById  cars   addEventListener  change   displayCar   x000D   x000D  function displayCar     x000D    var selected value   document getElementById  cars   value  x000D    alert selected value   x000D    x000D   lt select id  cars  gt  x000D     lt option value  bmw  gt BMW lt  option gt  x000D     lt option value  mercedes  gt Mercedes lt  option gt  x000D     lt option value  volkswagen  gt Volkswagen lt  option gt  x000D     lt option value  audi  gt Audi lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

If you re googling this  and don t want the event listener to be an attribute  use    x000D   x000D  document getElementById  my-select   addEventListener  change   function     x000D    console log  You selected     this value   x000D      x000D   lt select id  my-select  gt  x000D     lt option value  1  gt One lt  option gt  x000D     lt option value  2  gt Two lt  option gt  x000D     lt option value  3  gt Three lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

I wonder that everyone has posted about value and text option to get from  lt option gt  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   lt select onchange  test this   id  select id  gt       lt option value  0  gt -Select- lt  option gt       lt option value  1  gt Communication lt  option gt       lt option value  2  label    newText    gt Communication lt  option gt   lt  select gt       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

User · Answer

Use either JavaScript or jQuery for this    Using JavaScript   lt script gt  function val         d   document getElementById  select id   value      alert d      lt  script gt    lt select onchange  val    id  select id  gt    Using jQuery       select id   change function        alert   this  val

User · Answer

x000D   x000D  function test    x000D    var sel1   document getElementById  select id    x000D    var strUser1   sel1 options sel1 selectedIndex  value  x000D    console log strUser1   x000D    alert strUser1   x000D       Inorder to get the Test as value i e  Communication  x000D    var sel2   document getElementById  select id    x000D    var strUser2   sel2 options sel2 selectedIndex  text  x000D    console log strUser2   x000D    alert strUser2   x000D    x000D   lt select onchange  test    id  select id  gt  x000D     lt option value  0  gt -Select- lt  option gt  x000D     lt option value  1  gt Communication lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

lt script gt  function test a        var x   a selectedIndex      alert x      lt  script gt   lt select onchange  test this   id  select id  gt       lt option value  0  gt -Select- lt  option gt       lt option value  1  gt Communication lt  option gt       lt option value  2  gt Communication lt  option gt       lt option value  3  gt Communication lt  option gt   lt  select gt    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

User · Answer

jquery          select id   change function           selected value      alert   this  val            selected text      alert   this  find  quot option selected quot   text          html   lt select onchange  quot test   quot  id  quot select id quot  gt       lt option value  quot 0 quot  gt -Select- lt  option gt       lt option value  quot 1 quot  gt Communication lt  option gt   lt  select gt

User · Answer

HTML    lt select onchange  cityChanged this value   gt         lt option value  CHICAGO  gt Chicago lt  option gt         lt option value  NEWYORK  gt New York lt  option gt   lt  select gt    JS   function cityChanged city        alert city

[javascript] Get selected value/text from Select on change

Examples related to javascript