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.
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
});
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
}
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
});
| 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 |
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.
In Internet Explorer 9 & higher, there is a bug in handling form based javascript written for IE8. One of the side effect is that for ‘Forms’ with ‘Submit’ Buttons, it can cause a ‘Double Click Action’ on Submit.
This action can cause unexpected behavior on webpages designed primarily for IE8. There are a couple of ways to work around the issue. One simple JS fix is to replace the onclick call to something like this:
onclick="this.disabled=true; /*Do Required operation*/ return false;"
{adinserter 3}
Other options include, using a js listener to catch the click event and prevent it from double clicking.
Also changing the type of the button from “Submit” to Button apparently reduces the probability of this error recurring.
If you are like me and totally obsessed with Opera 10, but still a new user to the browser, then you might be wondering how to do a few things on it. One of my biggest problems was to get an Ad Block system up and running in the browser. A little web search gave me the way to do it.
Here are my notes:
![Reblog this post [with Zemanta]](http://img.zemanta.com/reblog_e.png?x-id=7846f65c-66bb-4271-8bf5-579a47aac4e9)