Hiển thị giá trị đã chọn của danh sách thả xuống (select) trên console trong JavaScript

Giả sử sau là danh sách thả xuống (select) của chúng ta:

<select onchange="selectedSubjectName()" id="subjectName">
  <option>Javascript</option>
  <option>MySQL</option>
  <option>MongoDB</option>
  <option>Java</option>
</select>

Dưới đây là mã để hiển thị giá trị đã chọn trên Console:

Ví dụ

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<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">
</head>
<body>
<select onchange="selectedSubjectName()" id="subjectName">
<option>Javascript</option>
<option>MySQL</option>
<option>MongoDB</option>
<option>Java</option>
</select>
<script>
  function selectedSubjectName() {
    var subjectIdNode = document.getElementById('subjectName');
    var value = subjectIdNode.options[subjectIdNode.selectedIndex].text;
    console.log("Giá trị đã chọn=" + value);
  }
</script>
</body>
</html>

Để chạy chương trình trên, lưu tệp với tên "anyName.html (index.html)" và nhấp chuột phải vào tệp. Chọn tùy chọn "Open with Live Server" trong trình soạn thảo VS Code.

Kết quả

Chương trình sẽ cho ra kết quả sau:

Bây giờ, tôi sẽ chọn Java. Ảnh chụp như sau:

Sau đó tôi sẽ chọn MongoDB. Ảnh chụp như sau: