How to get selected value from Dropdown list in JavaScript

Question

How can you get the selected value from drop down list using JavaScript  I have tried the following but it does not work   var sel   document getElementById  select1    var sv   sel options sel selectedIndex  value  alert sv

User · Answer

I would say change var sv   sel options sel selectedIndex  value  to var sv   sel options sel selectedIndex  text   It worked for me  Directing you to where I found my solution  Getting the selected value dropdown jstl

User · Answer

Here is a simple example to get the selected value of dropdown in javascript  First we design the UI for dropdown   lt div class  col-xs-12  gt   lt select class  form-control  id  language  gt       lt option gt ---SELECT--- lt  option gt       lt option gt JAVA lt  option gt       lt option gt C lt  option gt       lt option gt C   lt  option gt       lt option gt PERL lt  option gt   lt  select gt     Next we need to write script to get the selected item   lt script type  text javascript  gt    document  ready function              language   change function              var doc   document getElementById  language            alert  You selected     doc options doc selectedIndex  value                   Now When change the dropdown the selected item will be alert

User · Answer

Direct value should work just fine   var sv   sel value  alert sv     The only reason your code might fail is when there is no item selected  then the selectedIndex returns -1 and the code breaks

User · Answer

According to Html5 specs you should use --  element options e selectedIndex  text  e g  if you have select box like below     lt select id  selectbox1  gt       lt option value  1  gt First lt  option gt       lt option value  2  selected  selected  gt Second lt  option gt       lt option value  3  gt Third lt  option gt   lt  select gt   lt br  gt   lt button onClick  GetItemValue  selectbox1     gt Get Item lt  button gt    you can get value using following script     lt script gt   function GetItemValue q       var e   document getElementById q      var selValue   e options e selectedIndex  text      alert  Selected Value    selValue       lt  script gt    Tried and tested

User · Answer

Hope it s working for you   function GetSelectedItem           var index   document getElementById select1  selectedIndex        alert  value      document getElementById select1  value      show selected value      alert  text      document getElementById select1  options index  text      show selected text

User · Answer

It is working fine with me   I have the following HTML    lt div gt       lt select id  select1  gt           lt option value  1  gt test1 lt  option gt           lt option value  2  selected  selected  gt test2 lt  option gt           lt option value  3  gt test3 lt  option gt       lt  select gt       lt br  gt       lt button onClick  GetSelectedItem  select1     gt Get Selected Item lt  button gt   lt  div gt    And the following JavaScript   function GetSelectedItem el        var e   document getElementById el       var strSel    The Value is      e options e selectedIndex  value     and text is      e options e selectedIndex  text      alert strSel       See that you are using the right id  In case you are using it with ASP NET  the id changes when rendered

[javascript] How to get selected value from Dropdown list in JavaScript

Examples related to javascript