Display the dropdown’s (select) selected value on console in JavaScript?

Let’s say the following is our dropdown (select) −

<select onchange="selectedSubjectName()" id="subjectName">

Following is the code to display the selected value on Console −


 Live Demo

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/4.7.0/css/font-awesome.min.css">
<select onchange="selectedSubjectName()" id="subjectName">
   function selectedSubjectName() {
      var subjectIdNode = document.getElementById('subjectName');
      var value =
      console.log("The selected value=" + value);

To run the above program, save the file name “anyName.html(index.html)” and right click on the file. Select the option “Open with Live Server” in VS Code editor.


This will produce the following output −

Now, I am going to select Java. The snapshot is as follows −

After that I am going to select MongoDB. The snapshot is as follows −

Updated on: 14-Sep-2020

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started