jQuery Get Selected Option From Dropdown

Question

Usually I use     id   val   to return the value of the selected option  but this time it doesn t work  The selected tag has the id aioConceptName  html code   lt label gt Name lt  label gt   lt input type  text  name  name    gt   lt select id  aioConceptName  gt       lt option gt choose io lt  option gt       lt option gt roma lt  option gt       lt option gt totti lt  option gt   lt  select gt

User · Answer

nameofDropDownList   prop  selectedIndex   whateverNumberasInt     Imagine the DDL as an array with indexes  you are selecting one index  Choose the one which you want to set it to with your JS

User · Answer

You can select using exact selected option    Below will give innerText     select aioConceptName  gt  option selected   text     While below will give you value       select aioConceptName  gt  option selected   val

User · Answer

Using jQuery  just add a change event and get selected value or text within that handler   If you need selected text  please use this code       aioConceptName   change function          alert     aioConceptName  selected   text          Or if you need selected value  please use this code       aioConceptName   change function          alert     aioConceptName  selected   attr  value

User · Answer

Probably your best bet with this kind of scenario is to use jQuery s change method to find the currently selected value  like so       aioConceptName   change function          get the selected val using jQuery s  this  method and assign to a var    var selectedVal     this  val          perform the rest of your operations using aforementioned var        I prefer this method because you can then perform functions for each selected option in a given select field    Hope that helps

User · Answer

Usually you d need to not only get the selected value  but also run some action  So why not avoid all the jQuery magic and just pass the selected value as an argument to the action call    lt select onchange  your action this value   gt      lt option value     gt All lt  option gt      lt option       gt   lt  select gt

User · Answer

I had the same issue and I figured out why it was not working on my case The html page was divided into different html fragments and I found that I have another input field that carries the same Id of the select  which caused the val   to be always empty I hope this saves the day for anyone who have similar issue

User · Answer

Try this for value        select id of select element option   filter   selected   val      or this for text        select id of select element option   filter   selected   text

User · Answer

Reading the value  not the text  of a select   var status       Status   val    var status       Status   0  value  var status       Status option selected   val      How to disable a select   in both variants  value can be changed using    A  User can not interact with the dropdown  And he doesn t know what other options might exists       Status   prop  disabled   true     B  User can see the options in the dropdown but all of them are disabled       Status option   attr  disabled   true     In this case      Status   val   will only work for jQuery versions smaller than 1 9 0  All other variants will work   How to update a disabled select   From code behind you can still update the value in your select  It is disabled only for users       Status   val 2     In some cases you might need to fire events       Status   val 2  change

User · Answer

Straight forward and pretty easy    Your dropdown   lt select id  aioConceptName  gt       lt option gt choose io lt  option gt       lt option gt roma lt  option gt       lt option gt totti lt  option gt   lt  select gt    Jquery code to get the selected value      aioConceptName   change function         var  option     this  find  option selected           Added with the EDIT     var value    option val      returns the value of the selected option      var text    option text      returns the text of the selected option

User · Answer

You can use     drpList   val

User · Answer

For get value of tag selected       id Of Parent Selected Tag   find  quot  selected quot   val     And if you want to get text use this code       id Of Parent Selected Tag   find  quot  selected quot   text     For Example   lt div id  quot i am parent of select tag quot  gt   lt select gt           lt option value  quot 1 quot  gt CR7 lt  option gt           lt option value  quot 2 quot  gt MESSI lt  option gt   lt  select gt   lt  div gt     lt script gt       i am parent of select tag   find  quot  selected quot   val     OUTPUT 1 OR 2      i am parent of select tag   find  quot  selected quot   text     OUTPUT CR7 OR MESSI  lt  script gt

User · Answer

For dropdown options you probably want something like this   var conceptName       aioConceptName   find   selected   text      The reason val   doesn t do the trick is because clicking an option doesn t change the value of the dropdown--it just adds the  selected property to the selected option which is a child of the dropdown

User · Answer

For good practice you need to use val   to get value of selected options not text     lt label gt Name lt  label gt   lt input type  quot text quot  name  quot name quot    gt   lt select id  quot aioConceptName quot  gt       lt option value  quot choose quot  gt choose io lt  option gt   lt  select gt   You can use       quot  aioConceptName quot   find   selected   val     Or       quot  aioConceptName  selected quot   val     I wish that helps

User · Answer

lt select id  form-s  multiple  multiple  gt       lt option selected gt city1 lt  option gt       lt option selected value  c2  gt city2 lt  option gt       lt option value  c3  gt city3 lt  option gt   lt  select gt      lt select id  aioConceptName  gt       lt option value  s1  selected  gt choose io lt  option gt       lt option value  s2  gt roma  lt  option gt       lt option value  s3  gt totti lt  option gt   lt  select gt   lt select id  test  gt       lt option value  s4  gt paloma lt  option gt       lt option value  s5  selected  gt foo lt  option gt       lt option value  s6  gt bar lt  option gt   lt  select gt   lt script gt     select   change function         var a     selected   text        city1city2choose iofoo      var b     selected   val         city1  - selects just first query         but       var c     selected   map function         city1   city2   choose io   foo           return   this  text                 var d     selected   map function         city1   c2   s1   s5           return   this  val                console log a b c d        lt  script gt

User · Answer

You can try to debug it this way   console log     aioConceptName option selected   val

User · Answer

try to this one    document  ready function              name option   filter function             return   this  val          firstname   val           attr  selected   true            name   live  change   function                  firstname   val   this  find  option selected   attr  value                    lt script src  https   ajax googleapis com ajax libs jquery 1 3 0 jquery min js  gt  lt  script gt   lt select id  name  name  name  gt    lt option value    gt Please select    lt  option gt    lt option value  Elvis  gt Elvis lt  option gt    lt option value  Frank  gt Frank lt  option gt    lt option value  Jim  gt Jim lt  option gt    lt  select gt    lt input type  text  id  firstname  name  firstname  value  Elvis  readonly  readonly  gt

User · Answer

Try aioConceptName selectedOptions 0  value   x000D   x000D  let val   aioConceptName selectedOptions 0  value  console log  selected value   val   x000D   lt label gt Name lt  label gt   lt input type  text  name  name    gt   lt select id  aioConceptName  gt       lt option gt choose io lt  option gt       lt option gt roma lt  option gt       lt option gt totti lt  option gt   lt  select gt  x000D   x000D   x000D

User · Answer

I hope this also helps to understand better and helps  try this below      select id  aioConceptName     option selected   each function key value      options2   this  val        this  text       console log JSON stringify options2          to more details please  http   www drtuts com get-value-multi-select-dropdown-without-value-attribute-using-jquery

User · Answer

I stumbled across this question and developed a more concise version of Elliot BOnneville s answer   var conceptName       aioConceptName  selected   text      or generically       id  pseudoclass     This saves you an extra jQuery call  selects everything in one shot  and is more clear  my opinion

User · Answer

If you want to grab the  value  attribute instead of the text node  this will work for you   var conceptName       aioConceptName   find   selected   attr  value

User · Answer

aioConceptName option selected   val

User · Answer

Here is a simple solution  var val       mylist option selected   text    Check this example  JsFiddle

User · Answer

to fetch a select with same class  name you could do this  to check if a select option is selected   var bOK   true      optKategorien   each function index el       if   el  find   selected   text                    bOK   false

User · Answer

Use the jQuery val   function for select elements  too      The  val   method is primarily used to get the values of form elements   such as input  select and textarea  In the case of select elements  it   returns null when no option is selected and an array containing the   value of each selected option when there is at least one and it is   possible to select more because the multiple attribute is present     x000D   x000D    function     x000D        aioConceptName   on  change   function     x000D          debug   text     aioConceptName   val     x000D       trigger  change    x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 9 1 jquery min js  gt  lt  script gt  x000D   x000D   lt select id  aioConceptName  gt  x000D     lt option gt choose io lt  option gt  x000D     lt option gt roma lt  option gt  x000D     lt option gt totti lt  option gt  x000D   lt  select gt  x000D   lt div id  debug  gt  lt  div gt  x000D   x000D   x000D

User · Answer

For anyone who found out that best answer don t work   Try to use          aioConceptName option selected    attr  value      Works for me in recent projects so it is worth to look on it

User · Answer

Have you considered using plain old javascript   var box   document getElementById  aioConceptName     conceptName   box options box selectedIndex  text    See also Getting an option text value with JavaScript

User · Answer

Just this should work   var conceptName       aioConceptName   val

User · Answer

Set the values for each of the options   lt select id  aioConceptName  gt       lt option value  0  gt choose io lt  option gt       lt option value  1  gt roma lt  option gt       lt option value  2  gt totti lt  option gt   lt  select gt        aioConceptName   val   didn t work because  val   returns the value attribute  To have it work properly  the value attributes must be set on each  lt option gt    Now you can call     aioConceptName   val   instead of all this  selected voodoo being suggested by others

User · Answer

If you are in event context  in jQuery  you can retrieve the selected option element using     this  find  option selected   like this        dropdown selector   change function           Use  option  with the      to see that the variable is a jQuery object     var  option     this  find  option selected          Added with the EDIT     var value    option val     to get content of  value  attrib     var text    option text     to get  lt option gt Text lt  option gt  content       Edit  As mentioned by PossessWithin  My answer just answer to the question   How to select selected  Option     Next  to get the option value  use option val

User · Answer

you should use this syntax   var value       Id  selected   val      So try this Code   var values       aioConceptName  selected   val      you can test in Fiddle  http   jsfiddle net PJT6r 9   see about this answer in this post

User · Answer

Here is the simple solution for this issue       select aioConceptName   change function                 var selectedaioConceptName       aioConceptName   find   selected   val                console log selectedaioConceptName

User · Answer

try this code     get value      quot  Ostans option selected quot   val              quot  shahrha option selected quot   val    get text      quot  Ostans option selected quot   text              quot  shahrha option selected quot   text

[javascript] jQuery Get Selected Option From Dropdown

Examples related to javascript

Examples related to html

Examples related to jquery

Examples related to drop-down-menu