Get selected value in dropdown list using JavaScript

The selectedIndex property is utilized to both retrieve and set the index of the selected option within a dropdown list. This index corresponds to the position of the option within the list and can be manipulated through JavaScript to manage the selected option dynamically.

  1. Get from selectedIndex property.
selectObject.selectedIndex
  1. Set the Select selectedIndex property.
selectObject.selectedIndex = number

The index starts at 0 and if no element is selected then it return -1. If the drop-down list allows multiple selections it will only return the index of the first option selected.

run this source code Browser View


Full Source | JavaScript
<!DOCTYPE html> <html> <body> <div> <select id="items"> <option value="1">One</option> <option value="2">Two</option> <option value="3" selected="selected">Three</option> <option value="4">Four</option> <option value="5">Five</option> </select> <br><br> <button onClick="GetSelectedItem('items');">Get Selected Item</button> </div> <script> function GetSelectedItem(sItem) { var i = document.getElementById(sItem); var strSel = "Value is: " + i.options[i.selectedIndex].value + " and Text is: " + i.options[i.selectedIndex].text; alert(strSel); } </script> </body> </html>


Javascript drop down selected item

jQuery

$("#elementId :selected").text(); // The text content of the selected option $("#elementId :selected").val(); // The value of the selected option

Conclusion

To obtain the selected value from a dropdown list in JavaScript, retrieve the dropdown element and access its value property. This straightforward approach enables you to retrieve and process the chosen option easily.






Related Topics
  1. JavaScript Popup Boxes
  2. Opening a new window in JavaScript
  3. How to Create Drop-Down Lists in JavaScript
  4. How do I include a JavaScript file in another JavaScript file?
  1. Print the content of a Div using JavaScript/jQuery
  2. How to get the current URL using JavaScript ?
  3. How to Detect a Mobile Device with JavaScript/jQuery
  4. How to validate an email address in JavaScript
  5. JavaScript Array Iteration
  6. How to Remove a Specific Item from an Array in JavaScript
  7. What is JavaScript closures?
  8. How To Remove a Property from a JavaScript Object
  9. How do I get the current date in JavaScript?
  10. How to Open URL in New Tab | JavaScript
  11. How to delay/wait/Sleep in code execution | JavaScript
  12. How to round to at most 2 decimal places | JavaScript
  13. How to convert string to boolean | JavaScript
  14. How to check undefined in JavaScript?
  15. How To Copy to Clipboard | JavaScript
  16. How to encode a URL using JavaScript?
  17. How to force Input field to enter numbers only | JavaScript
  18. How to create multiline string in JavaScript
  19. How to Check for an Empty String in JavaScript?