Get selected value of a dropdown s item using jQuery

Question

How can I get the selected value of a dropdown box using jQuery  I tried using  var value       dropDownId   val      and  var value      select dropDownId option selected   val      but both return an empty string

User · Answer

You can do this by using following code       dropDownId   val      If you want to get the selected value from the select list s options  This will do the trick       dropDownId option selected   text

User · Answer

For selected text use   value      dropDownId  selected   text      For selected value use   value      dropDownId   val

User · Answer

I know this is a terribly old post and I should probably be flogged for this pitiful resurrection  but I thought I would share a couple of VERY helpful little JS snippets that I use throughout every application in my arsenal     If typing out       selector option selected   val      or     selector option selected   text     is getting old  try adding these little crumpets to your global   js file   function soval a        return    option selected   a  val      function sotext a        return    option selected   a  text        and just write soval   selector    or sotext   selector    instead  Get even fancier by combining the two and returning an object containing both the value and the text   function so a        my value      option selected   a  val        my text       option selected   a  text        return my      It saves me a ton of precious time  especially on form-heavy applications

User · Answer

Try this jQuery       ddlid option selected   text      or this javascript    var selID document getElementById  ddlid     var text selID options selID selectedIndex  text    If you need to access the value and not the text then try using val   method instead of text     Check out the below fiddle links   Demo1   Demo2

User · Answer

Use the method below to get the selected value on page load     document  ready function          ddlid   on  change   function                      var value       ddlid  selected   text                    alert value

User · Answer

var value       dropDownId selected   text     Should work fine  see this example    x000D   x000D    document  ready function     x000D        button1   click function     x000D      alert     combo  selected   text     x000D        x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt select id  combo  gt  x000D     lt option value  1  gt Test 1 lt  option gt  x000D     lt option value  2  gt Test 2 lt  option gt  x000D   lt  select gt  x000D   lt input id  button1  type  button  value  Click     gt  x000D   x000D   x000D

User · Answer

This is what works       var value     option selected       dropDownId    val

User · Answer

Yet another tested example    lt  DOCTYPE html gt   lt html gt   lt head gt   lt script src  http   ajax googleapis com ajax libs jquery 1 10 2 jquery min js  gt   lt  script gt   lt script gt    document  ready function            bonus   change function         alert     bonus option selected   text                  lt  script gt   lt  head gt    lt body gt   lt select id  bonus  gt   lt option value  1  gt - 5000 lt  option gt   lt option value  2  gt - 2500 lt  option gt   lt option value  3  gt  0 lt  option gt   lt option value  4  gt  1 lt  option gt   lt option value  5  gt We really appreciate your work lt  option gt   lt  select gt   lt  body gt   lt  html gt

User · Answer

You can use any of these     document  on  change    select dropDownId   function                 var value      select dropDownId option selected   text                   OR              var value     this  val

User · Answer

This will alert the selected value  JQuery Code       document  ready function                   myDropDown   change function  event                alert  You have Selected         this  val                           HTML Code      lt select id  myDropDown  gt           lt option gt Milk lt  option gt           lt option gt Egg lt  option gt           lt option gt Bread lt  option gt           lt option gt Fruits lt  option gt       lt  select gt

User · Answer

this will do the trick       dropDownId   val

User · Answer

To get the jquery value from drop down you just use below function just sent id and get the selected value   function getValue id       var value           if       id  0   undefined  amp  amp        id  0   null           for var i 0 i lt       id  0  length i                 if       id  0  i  selected    true                   if value                             value   value                                           value   value         id  0  i  innerText                                    return value

User · Answer

You need to put like this       id  dropDownId  option selected   val

User · Answer

use      dropDownId   find  option selected   val     This should work

User · Answer

use either of these codes       dropDownId  selected   text      OR      dropDownId   text

User · Answer

select id  dropDownId    val      try this

User · Answer

For Normal Page loaded dropdowns      quot  dropDownId quot   on  change  function         var value   this  val         alert value          for dynamically added options Make sure to keep the id unique     document  on  change    dropDownId  function        var value   this  val        alert value

User · Answer

selector  lt b gt  gt  lt  b gt  option selected   val     Or      selector  lt b gt  gt  lt  b gt  option selected   text     Above codes worked well for me

User · Answer

Try this        dropDownId option   filter   selected   text               dropDownId option   filter   selected   val

User · Answer

For single select dom elements  to get the currently selected value       dropDownId   val      To get the currently selected text       dropDownId  selected   text

User · Answer

HTML    lt select class  form-control  id  SecondSelect  gt          lt option gt 5 lt option gt          lt option gt 10 lt option gt          lt option gt 20 lt option gt          lt option gt 30 lt option gt   lt  select gt    JavaScript   var value       SecondSelect   0  value

User · Answer

try this      yourDropdown option selected   text

User · Answer

Did you supply your select-element with an id    lt select id  dropDownId  gt        Your first statement should work

User · Answer

Or if you would try        foo   find  select name bar    val      I used It today and It working fine

User · Answer

Try this  it gets the value      select myField   find  option selected   val

User · Answer

x000D   x000D   function fundrp    x000D   var text value       drpboxid option selected   text      x000D   console log text value   x000D   var val text       drpboxid option selected   val      x000D   console log val text   x000D   var value text       drpboxid option selected   attr  vlaue     x000D   console log value text   x000D   var get att value       drpboxid option selected   attr  id    x000D   console log get att value   x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 2 3 jquery min js  gt  lt  script gt  x000D   lt select id  drpboxid  gt  x000D    lt option id  1 one  vlaue  one  gt one lt  option gt  x000D    lt option id  2 two  vlaue  two  gt two lt  option gt  x000D    lt option id  3 three  vlaue  three  gt three lt  option gt                x000D   lt  select gt  x000D   lt button id  btndrp  onclick  fundrp    gt Tracking Report1234 lt  button gt  x000D   x000D   x000D

User · Answer

dropDownId   val  2    var SelectedValue      dropDownId option selected   text        ParentClass  select-value   html SelectedValue      lt p class  inline-large-label button-height ParentClass   gt        lt label for  large-label-2  class  label  gt Country  lt span style  color  Red   gt   lt  span gt  lt small gt  lt  small gt  lt  label gt        lt asp DropDownList runat  server  ID  dropDownId   CssClass  select  Width  200px  gt                 lt  asp DropDownList gt   lt  p gt

User · Answer

If you have more than one dropdown try   HTML    lt select id  dropdown1  onchange  myFunction this   gt       lt option value       gt Option1      lt option value       gt Option2  lt  select gt   lt select id  dropdown2  onchange  myFunction this   gt       lt option value       gt Option1      lt option value       gt Option2  lt  select gt    JavaScript       function myFunction sel            var selected   sel value

User · Answer

The id that got generated for your drop down control in the html will be dynamic one  So use the complete id    ct100  lt Your control id gt    val    It will work

User · Answer

I know this is old but I though I update this with an more up to date answer      document   on   change     combo   function      var prepMin      combo option selected   val     alert prepMin         I hope this helps

[jquery] Get selected value of a dropdown's item using jQuery

Examples related to jquery