Get selected option from select element

Question

I am trying to get the selected option from a dropdown and populate another item with that text  as follows  IE is barking up a storm and it doesn t work in Firefox       ddlCodes   change function           txtEntry2   text   ddlCodes option selected   text          What am I doing wrong

User · Answer

Using the selectedOptions property  HTML5  you can get the selected option s    document getElementbyId  id   selectedOptions     With JQuery can be achieved by doing this       id   0  selectedOptions     or      id   prop  selectedOptions      The property contains an HTMLCollection array similitar to this  one selected option     lt option value   1  gt  ABC lt  option gt     or multiple selections     lt option value   1  gt  ABC lt  option gt    lt option value   2  gt  DEF lt  option gt

User · Answer

The above would very well work  but it seems you have missed the jQuery typecast for the dropdown text  Other than that it would be advisable to use  val   to set text for an input text type element  With these changes the code would look like the following           txtEntry2   val     ddlCodes option selected   text

User · Answer

Here is a shorter version that should also work          ddlCodes   change function               txtEntry2   text this val

User · Answer

The first part is to get the element from the drop down menu which may look like this      lt select id  cycles list  gt       lt option value  10  gt 10 lt  option gt       lt option value  100  gt 100 lt  option gt       lt option value  1000  gt 1000 lt  option gt       lt option value  10000  gt 10000 lt  option gt   lt  select gt     To capture via jQuery you can do something like so        cycles list   change function         var mylist   document getElementById  cycles list        iterations   mylist options mylist selectedIndex  text         Once you have stored the value in your variable  the next step would be to send the information stored in the variable to the form field or HTML element of your choosing  It may be a div p or custom element      i e   lt p gt  lt  p gt  OR  lt div gt  lt  div gt    You would use         p   html iterations   OR    div   html iterations     If you wish to populate a text field such as       lt input type  text  name  textform  id  textform  gt  lt  input gt    You would use          textform   text   iterations    Of course you can do all of the above in less steps  I just believe it helps people to learn when you break it all down into easy to understand steps    Hope this helps

User · Answer

To know number of selected elements use     select option selected   length   To Get the value of all selected elements use      var str            select option selected   each function              str      this  text

User · Answer

This worked for me       SelectedCountryId option selected   0  textContent

User · Answer

With less jQuery    lt select name  ddlCodes   onchange      txtEntry2   text this options this selectedIndex  value    gt    this options this selectedIndex  value is plain JavaScript    Source  German SelfHTML

User · Answer

if you have this already and use jquery this will be your answer       this  0  selectedOptions 0   text

User · Answer

Try following code      ddlCodes   change function           txtEntry2   val       ddlCodes  selected   text

User · Answer

Here s a short version       ddlCodes   change function           txtEntry2   text   this  find   selected   text           karim79 made a good catch  judging by your element name txtEntry2 may be a textbox  if it s any kind of input  you ll need to use  val   instead or  text   like this         txtEntry2   val   this  find   selected   text       For the  what s wrong   part of the question   text   doesn t take a selector  it takes text you want it set to  or nothing to return the text already there   So you need to fetch the text you want  then put it in the  text string  method on the object you want to set  like I have above

User · Answer

Given this HTML    lt select gt       lt option value  0  gt One lt  option gt       lt option value  1  gt Two lt  option gt   lt  select gt    Select by description for jQuery v1 6    var text1    Two      select option   filter function           may want to use   trim in here     return   this  text      text1      prop  selected   true

User · Answer

Try this       ddlCodes   change function       var option   this options this selectedIndex         txtEntry2   text   option  text

[jquery] Get selected option from select element

Examples related to jquery

Examples related to html-select