For a check box with the id “checkbox”, here is how to check if its checked:
$('#checkbox').is(':checked'); // Returns True if checked else False
Category: JavaScript
Here is the code to remove duplicates from an Array:
var distinctVal = function(arr){
var newArray = [];
for(var i=0, j=arr.length; i<j; i++){
if(newArray.indexOf(arr[i]) == -1)
newArray.push(arr[i]);
}
return newArray;
};
To check if a variable(a) has the value null, use the following code:
if (a === null) // Best way to do it!
if (a == null) // This does return true if a is null but it returns true also if a is undefined... so avoid it
To check if a variable(a) has the value undefined, use the following code:
if (typeof a === "undefined") // This works
if (a === undefined) // This works too
if (a == undefined) // This does return true if a is undefined but it returns true also if a is null... so avoid it
JavaScript has two sets of equality operators: === and ==. They mostly work exactly the same ie, if the operands are of the same type and have the same value, then === produces true & so does ==. But if the operands are of different types, then === produces false & == says true. The simplest reason is that == is also a type converter.
Here are some examples of === & == in action:
true == 1 // true
true === 1 // false, because they are of a different type
1 == "1" // true, automatic type conversion for value only
1 === "1" // false, because they are of a different type
null == undefined // true
null === undefined // false
== is also notoriously inconsistent. See the below examples:
'' == '0' // false
0 == '' // true
0 == '0' // true
false == 'false' // false
false == '0' // true
false == undefined // false
false == null // false
null == undefined // true
' \t\r\n ' == 0 // true
Best practice is to avoid == and use === consistently in your code.
Update (2025): This guide has been updated with modern ES6+ methods and troubleshooting FAQs to ensure it works with the latest web standards and frameworks.
Iterating through dropdown (select) options is a fundamental task in web development. Whether you are validating a form, dynamically filtering data, or syncing UI states, knowing how to efficiently loop through a <select> element’s options is essential for a smooth user experience.
In this guide, we will cover the modern ES6+ way, the traditional approach, and the jQuery method.
1. Modern JavaScript (ES6+) — Recommended
The most efficient and readable way to handle this today is by converting the HTMLOptionsCollection into an array and using the forEach method. This is the standard in modern frameworks like React, Vue, or Vanilla JS projects.
JavaScript
// Get the dropdown by ID
const dropdown = document.getElementById("dropdownlist");
// Convert options to an Array and iterate
Array.from(dropdown.options).forEach((option) => {
console.log("Text:", option.text, "Value:", option.value);
// Add your custom logic or operations here
});
2. The Traditional JavaScript Loop
If you need to support legacy browsers (like very old versions of IE) or prefer the standard for loop, use the code below. It is highly performant as it avoids creating an array copy.
JavaScript
var x = document.getElementById("dropdownlist");
for (var i = 0; i < x.options.length; i++) {
console.log("Value: " + x.options[i].value);
// Perform operations based on each option
}
3. The jQuery Approach
If your project is already utilizing the jQuery library, the .each() method provides a very concise and readable syntax for targeting child options.
JavaScript
$("#dropdownlist > option").each(function() {
console.log("Text: " + this.text + " | Value: " + this.value);
// Add your operations here
});
Comparison Table: Which Method Should You Use?
| Method | Best For | Complexity |
|---|---|---|
| ES6 Array.from() | Modern Web Apps / Clean Code | Low |
Standard for loop | High Performance / Legacy Support | Medium |
jQuery .each() | Projects already using jQuery | Low |
Frequently Asked Questions (FAQs)
How do I select a specific value while iterating?
You can add a simple conditional check inside your loop. For example: if (option.value === "target") { option.selected = true; }
How do I get the total count of options in a dropdown?
You can simply access the length property: document.getElementById("dropdownlist").options.length;
Can I iterate through a dropdown without using an ID?
Yes, you can use document.querySelector('select') or document.getElementsByClassName('your-class') to target the element without an ID.