Question 302747 in Html Question posted in
Some basic documentation can be found here.

Html – How to hide the first option in select

I want to hide the "Day" option. It should only appear if nothing is selected.

<select id="day" name="day">
    <option disabled selected>Day</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>

How it looks at the moment: https://imgur.com/a/tK3bHDX

I tried adding "hidden" to the first option but it didn’t work either. I use Safari as my web browser. Maybe that’s the reason I don’t know.

<option disabled selected hidden>Day</option>
Tags:

2

Answers


  1. 0

    In HTML, you cannot directly hide the first option in a element using only HTML and CSS. However, you can use a combination of JavaScript and CSS to achieve this. Here’s an example using JavaScript to hide the first option:

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hide First Option</title>
  <style>
    /* Hide the first option */
    #mySelect option:first-child {
      display: none;
    }
  </style>
 </head>
<body>

<select id="mySelect">
  <option value="" disabled selected>Select an option...</option>
   <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
 </select>

  <script>
  / JavaScript to handle hiding the first option
  document.addEventListener("DOMContentLoaded", function() {
var selectElement = document.getElementById("mySelect");
// Hide the first option
selectElement.options[0].style.display = "none";
  });
 </script>

 </body>
 </html>

    In this example:

    The CSS style display: none; is used to hide the first option.
    The JavaScript code is wrapped in an event listener for the DOMContentLoaded event to ensure that the script runs after the document has been fully loaded.
    The JavaScript code selects the element with the id "mySelect" and hides the first option by setting its display style property to "none".
    Keep in mind that using JavaScript may not be suitable in all situations, especially if you’re working in an environment where JavaScript is disabled. If JavaScript is not an option, consider restructuring your HTML to place the default option at the end or use a placeholder option that doesn’t need to be hidden.

    Login or Signup to reply.
  2. 0

    Is this what you need by any chance?
    use querySelector to get the element of your disabled option and compare, if another option was selected then hide it

    function handleDayChange(selectElement) {
    const selectedValue = selectElement.value;
    let dayOption = selectElement.querySelector('option:disabled');

    if (selectedValue !== "") {
        dayOption.style.display = "none";
    } else {
        dayOption.style.display = "";
    }
}
    <select id="day" name="day" onchange="handleDayChange(this)">
    <option disabled selected>Day</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search