jQuery get selected option value not the text but the attribute value

Question

Okay  I have this code    lt select name  selector  id  selector  gt   lt option value  1  gt Option 1 lt  option gt   lt option value  2  gt Option 2 lt  option gt   lt  select gt    And I d like to get the value of the option selected  Example   Option 2  is selected  and the value of it is  2   The  2  is the value I need to get and not  Option 2

User · Answer

For a select like this   lt select class  btn btn-info pull-right  id  list-name  style  width  auto   gt      lt option id  0  gt CHOOSE AN OPTION lt  option gt      lt option id  127  gt John Doe lt  option gt      lt option id  129  selected gt Jane Doe lt  option gt        you can get the id this way       list-name option selected   attr  id      Or you can use value instead  and get it the easy way      lt select class  btn btn-info pull-right  id  list-name  style  width  auto   gt      lt option value  0  gt CHOOSE AN OPTION lt  option gt      lt option value  127  gt John Doe lt  option gt      lt option value  129  selected gt Jane Doe lt  option gt    like this       list-name   val

User · Answer

04 2020  Corrected old answer Use  selected pseudo selector on the selected options and then use the  val function to get the value of the option     select name selector  option   filter   selected   val    Side note  Using filter is better then using  selected selector directly in the first query  If inside a change handler  you could use simply this value to get the selected option value  See demo for more options   x000D   x000D    ways to retrieve selected option and text outside handler console log  Selected option value        select option   filter   selected   val      console log  Selected option value        select option   filter   selected   text         select   on  change   function          ways to retrieve selected option and text outside handler   console log  Changed option value     this value     console log  Changed option text       this  find  option   filter   selected   text         x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 1 12 4 jquery min js  gt  lt  script gt   lt select gt     lt option value  1  selected gt 1 - Text lt  option gt     lt option value  2  gt 2 - Text lt  option gt     lt option value  3  gt 3 - Text lt  option gt     lt option value  4  gt 4 - Text lt  option gt   lt  select gt  x000D   x000D   x000D   Old answer  Edit  As many pointed out  this does not returns the selected option value    Use  val to get the value of the selected option  See below     select name selector    val

User · Answer

this code work very well for me  this return the value of selected option           select id   find  option selected   val

User · Answer

document   ready function            select name selectorname    change function           alert   this  val

User · Answer

Look at the example        lt select class  element select small  id  account name  name  account name  gt             lt option value    selected  selected  gt Please Select lt  option gt                      lt option value  paypal   gt Paypal lt  option gt           lt option value  webmoney   gt Webmoney lt  option gt        lt  select gt     lt script type  text javascript  gt             document  ready function                      account name   change function                   alert   this  val                                                                                              lt  script gt

User · Answer

It s working better  Try it  let value      quot select yourId option quot   filter  quot  selected quot   val

User · Answer

you can use jquery as follows  SCRIPT        IDOfyourdropdown   change function        alert   this  val             FIDDLE is here

User · Answer

selectorID   val      OR     select name selector    val      OR      class nam   val

User · Answer

select   change function         console log   this  val           jsFiddle example   val   will get the value

User · Answer

I just wanted to share my experience  For me       selectorId   val    returned null   I had to use      selectorId option selected   val

User · Answer

Try this     document  ready function        var data     select   find  option selected   val          or  var data     select   find  option selected   text

User · Answer

Source Link  Use jQuery val   to GET Selected Value and and text   to GET Option Text        lt select id  myDropDown  class  form-control  gt           lt option value  0  gt Select Value 0 lt  option gt           lt option value  8  gt Option value 8 lt  option gt           lt option value  5  gt Option value 5 lt  option gt           lt option value  4  gt Option value 4 lt  option gt       lt  select gt    Change Event on Select Dropdown              myDropDown   change function                      Fetching Value             console log   this  val                     Fetching Text             console log   this  find  option selected   text                  alert  Value      this  val       Text      this  find  option selected   text                   Button Click             button   click function                  Fetching Value             console log     myDropDown   val             Fetching Text             console log     myDropDown option selected   text                  alert  Value        myDropDown   val       Text        myDropDown option selected   text

User · Answer

One of my options didn t have a value   lt option gt ----- lt  option gt   I was trying to use if     this  val           but I was getting strange results  Turns out if you don t have a value attribute on your  lt option gt  element  it returns the text inside of it instead of an empty string  If you don t want val   to return anything for your option  make sure to add value

User · Answer

You need to add an id to your select  Then      selectorID   val

[jquery] jQuery get selected option value (not the text, but the attribute 'value')

Examples related to jquery

Examples related to html

Examples related to html-select