Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Display in console if Select list value contains a value from an array in JavaScript?
In JavaScript, you can check if a selected dropdown value exists in an array using event listeners and array methods. This is useful for validation or conditional logic based on user selections.
HTML Structure
Let's start with a basic dropdown containing several names:
<select id="nameSelect">
<option>John</option>
<option>David</option>
<option>Chris</option>
<option>Mike</option>
<option>Bob</option>
<option>Carol</option>
</select>
Array to Check Against
We'll define an array of names to compare with the selected value:
var listOfNames = ["Chris", "Robert", "Mike"];
console.log("Array to check:", listOfNames);
Using jQuery with $.inArray()
jQuery's $.inArray() method returns the index of the element if found, or -1 if not found:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Check Select Value in Array</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>
<body>
<select id="nameSelect">
<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"];
$('#nameSelect').on('change', function() {
var selectedName = this.value;
if ($.inArray(selectedName, listOfNames) > -1) {
console.log('? "' + selectedName + '" is present in the array');
} else {
console.log('? "' + selectedName + '" is not present in the array');
}
});
</script>
</body>
</html>
Using Vanilla JavaScript with includes()
Modern JavaScript provides the includes() method for cleaner array checking:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Check Select Value with Vanilla JS</title>
</head>
<body>
<select id="nameSelect">
<option>John</option>
<option>David</option>
<option>Chris</option>
<option>Mike</option>
<option>Bob</option>
<option>Carol</option>
</select>
<script>
const listOfNames = ["Chris", "Robert", "Mike"];
const selectElement = document.getElementById('nameSelect');
selectElement.addEventListener('change', function() {
const selectedName = this.value;
if (listOfNames.includes(selectedName)) {
console.log('? "' + selectedName + '" is present in the array');
} else {
console.log('? "' + selectedName + '" is not present in the array');
}
});
</script>
</body>
</html>
Expected Output
When you select different options from the dropdown, you'll see console messages like:
? "Chris" is present in the array ? "John" is not present in the array ? "Mike" is present in the array
Comparison of Methods
| Method | Library Required | Return Value | Browser Support |
|---|---|---|---|
$.inArray() |
jQuery | Index (-1 if not found) | All browsers with jQuery |
Array.includes() |
None (Vanilla JS) | Boolean (true/false) | Modern browsers (ES2016+) |
Key Points
- Use the
changeevent to detect dropdown value changes -
$.inArray()returns -1 if the element is not found -
Array.includes()returns a boolean and is more intuitive - Always check the browser console to see the output messages
Conclusion
Both jQuery's $.inArray() and vanilla JavaScript's includes() method effectively check if a select value exists in an array. Choose includes() for modern projects or $.inArray() when using jQuery.
710 Views
