Hiển thị trên console nếu giá trị danh sách chọn chứa giá trị từ mảng trong JavaScript

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

<select>
  <option>John</option>
  <option>David</option>
  <option>Chris</option>
  <option>Mike</option>
  <option>Bob</option>
  <option>Carol</option>
</select>

Sau là mảng của chúng ta:

var listOfNames = ["Chris", "Robert", "Mike"];

Để kiểm tra xem giá trị danh sách chọn có chứa giá trị trong mảng, sử dụng:

$('select').on('change').

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>
<option>John</option>
<option>David</option>
<option>Chris</option>
<option>Mike</option>
<option>Bob</option>
<option>Carol</option>
</select>
<script>
  var listOfNames = ["Chris", "Robert", "Mike"];
  $('select').on('change', function() {
    var name = this.value.split(' ')[0];
    if ($.inArray(name, listOfNames) > -1) {
      console.log('Giá trị này có trong mảng tên');
    } else {
      console.log('Giá trị này không có trong mảng tên');
    }
  });
</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ờ, chọn một giá trị. Nếu giá trị giống như trong mảng, kết quả hiển thị trên Console: