HTML Option defaultSelected Property: Option Default Selected

HTML Option defaultSelected Property: A Comprehensive Guide

The defaultSelected property in HTML is a boolean attribute of the <option> element within a <select> dropdown. It specifies whether the option should be pre-selected when the page initially loads. This property is particularly useful for providing a default choice to the user, streamlining form completion and enhancing usability.

Definition and Purpose

The defaultSelected property indicates the initial state of the <option> element. It reflects the value of the selected attribute in the HTML source code. This is distinct from the selected property, which reflects the current state of the option, which can be changed by user interaction or JavaScript.

Syntax

The syntax for using the defaultSelected property is straightforward:

<option value="value" defaultSelected>Option Text</option>

To check or set the defaultSelected property using JavaScript:

const option = document.getElementById("myOption");
const isDefaultSelected = option.defaultSelected; // Get the default selected state

option.defaultSelected = true; // Set the option as default selected

Attributes Table

| Attribute | Type | Description |
| :————— | :——– | :———————————————————————————– |
| defaultSelected | Boolean | Indicates whether the option should be selected by default when the page loads. |

Examples

Let’s explore several examples to illustrate how to effectively use the defaultSelected property.

Basic Usage

This example demonstrates how to set the defaultSelected property for an option in a dropdown menu.

<select id="countrySelect">
  <option value="usa">USA</option>
  <option value="canada" defaultSelected>Canada</option>
  <option value="uk">UK</option>
</select>

<script>
  const selectElement = document.getElementById("countrySelect");
  console.log(
    "Canada default selected:",
    selectElement.options[1].defaultSelected
  ); // Output: true
</script>

Output:

The “Canada” option will be pre-selected when the page loads. The console will log true indicating that the defaultSelected property is set.

Setting defaultSelected with JavaScript

You can also set the defaultSelected property dynamically using JavaScript.

<select id="fruitSelect">
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="orange">Orange</option>
</select>

<button id="setDefaultBanana">Set Banana as Default</button>

<script>
  const fruitSelectElement = document.getElementById("fruitSelect");
  const setDefaultButton = document.getElementById("setDefaultBanana");

  setDefaultButton.addEventListener("click", () => {
    fruitSelectElement.options[1].defaultSelected = true;
    console.log(
      "Banana default selected:",
      fruitSelectElement.options[1].defaultSelected
    ); // Output: true
  });
</script>

Output:

Initially, no option is selected by default. Clicking the “Set Banana as Default” button will set the defaultSelected property of the “Banana” option to true. The console will log true.

Checking the defaultSelected Property

This example shows how to check the defaultSelected property to determine if an option was originally set as selected.

<select id="colorSelect">
  <option value="red">Red</option>
  <option value="green" defaultSelected>Green</option>
  <option value="blue">Blue</option>
</select>

<script>
  const colorSelectElement = document.getElementById("colorSelect");

  for (let i = 0; i < colorSelectElement.options.length; i++) {
    const option = colorSelectElement.options[i];
    console.log(
      `${option.value} is default selected:`,
      option.defaultSelected
    );
  }
  // Output:
  // red is default selected: false
  // green is default selected: true
  // blue is default selected: false
</script>

Output:

The console will log whether each option was originally set as default selected. Only “Green” will have a true value.

Resetting Form to Default Values

The defaultSelected property is useful when resetting a form to its initial state.

<form id="myForm">
  <select id="citySelect">
    <option value="ny">New York</option>
    <option value="la" defaultSelected>Los Angeles</option>
    <option value="chicago">Chicago</option>
  </select>
  <button type="reset">Reset Form</button>
</form>

<script>
  const formElement = document.getElementById("myForm");
  const citySelectElement = document.getElementById("citySelect");

  formElement.addEventListener("reset", () => {
    // The form reset automatically sets the selected option to the defaultSelected one.
    console.log(
      "Selected option after reset:",
      citySelectElement.options[citySelectElement.selectedIndex].value
    ); // Output: la
  });
</script>

Output:

After changing the selected option and clicking the “Reset Form” button, the dropdown will revert to the “Los Angeles” option, as it was the defaultSelected option. The console will log la.

Dynamic Form Population with Default Selection

In real-world scenarios, you might populate a form dynamically using JavaScript and need to set a default selection based on certain conditions.

<select id="dynamicSelect"></select>

<script>
  const dynamicSelectElement = document.getElementById("dynamicSelect");
  const optionsData = [
    { value: "1", text: "Option 1" },
    { value: "2", text: "Option 2", default: true },
    { value: "3", text: "Option 3" },
  ];

  optionsData.forEach((optionData) => {
    const option = document.createElement("option");
    option.value = optionData.value;
    option.text = optionData.text;
    if (optionData.default) {
      option.defaultSelected = true;
    }
    dynamicSelectElement.add(option);
  });

  console.log(
    "Option 2 default selected:",
    dynamicSelectElement.options[1].defaultSelected
  ); // Output: true
</script>

Output:

The dropdown will be populated with options from the optionsData array. “Option 2” will be pre-selected because its default property is set to true in the data. The console will log true.

Key Differences: defaultSelected vs selected

It’s important to distinguish between defaultSelected and selected:

• defaultSelected: Reflects the initial state defined in the HTML. It indicates which option should be selected when the page first loads or when the form is reset.
• selected: Reflects the current state of the option. This can change due to user interaction or JavaScript manipulation after the page has loaded.

Browser Support

The defaultSelected property is supported by all major browsers, including:

• Chrome
• Firefox
• Safari
• Edge
• Opera

Tips and Notes

• Use defaultSelected to provide a sensible default choice for users.
• Remember that defaultSelected only affects the initial state or when the form is reset.
• Use JavaScript to dynamically change the selected property if you need to update the selection based on user actions or other logic.
• Always test your forms to ensure the defaultSelected property behaves as expected across different browsers. 🧪

By understanding and utilizing the defaultSelected property effectively, you can create more user-friendly and efficient HTML forms.