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

Here is a simple example to get the selected value of dropdown in javascript

First we design the UI for dropdown

<div class="col-xs-12">
<select class="form-control" id="language">
    <option>---SELECT---</option>
    <option>JAVA</option>
    <option>C</option>
    <option>C++</option>
    <option>PERL</option>
</select>

Next we need to write script to get the selected item

<script type="text/javascript">
$(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

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

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

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

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

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

Examples related to javascript