Home/ Questions/Q 9164593
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T14:43:15+00:00

I’m sure this is really simple. But it just won’t work for me. I

  • 0

I’m sure this is really simple. But it just won’t work for me.

I wrote a form that allows the user to select a month from a list using the tags:

<select> <option>

onchange the class .gone from the day SELECT is removed, thereby displaying the list.
onchanve the class .gone from the year INPUT is removed, thereby displaying the year.

I used PHP to set the value for year to the current year. I want to take the value from month and addClass .gone to the OPTION tag of the 31st day (and 29 and 30 for february) so that February 30th etc. isn’t an option. I will % the value of year by 4==0 to check leap year and then not addClass .gone to the 29th of february. Basic date select form.

The Problem: When I add class .gone to OPTION it is still displayed. I assumed this is simply me forgetting some basic principle of html. Nevertheless, I can’t figure it out.

CSS:

.gone {display:none;}

I could also use this:

.hidden {visibility:hidden;}

but that still displays the space, so I didn’t use it.

HTML:

<html>
  <head>
     <link to css styles>

    <script language="JavaScript" type="text/javascript">
       function showDay() {

           $("#day").removeClass("gone")
       }

       function showYear() {

           $("#year").removeClass("gone")
       }
    </script>


  </head>
  <body>
      <table>
         <tr>
         <td>
           <select id="month" onchange="showDay();">
              <option>January</option>
              <option>more months...yada...yada</option>
              <option>December</option>
           </select>
         </td>
         <td>
           <select class="gone" id="day" onchange="showYear();">
              <option></option>
              <option>1</option>
              <option>2</option>
              <option>more days</option>
              <option class="gone">31</option>
           </select>
         </td>
         <td>
              <input class="gone" type="text"  size="5" name="year" id="year" 
               value="<?php echo date("Y"); ?>"/>
         </td>
         </tr>
      </table>
  </body>
</html>

The onchange javascript and php work exactly how I want them too. I didn’t bother writing any scripts to make the days appear or disappear yet because simply putting the .gone class in the OPTION tag didn’t work. Is there a way to make it hidden or not selectable? Once I figure that out, I’ll write the script to make it happen based on the month and year.

Thank you for all the help!

UPDATE!!!

Based on the answers received. I am going to disable the dates that I don’t want selectable using javascript. From w3schools.com I got a sample script, which I modified slightly, and set to call onchange from the month SELECT.

function disableElement()
{
  var sel=document.getElementById("day")
  sel.options[30].disabled=true;
  sel.options[31].disabled=true;
}

It worked perfectly. Now the 30th and 31st day are not selectable!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The Problem: When I add class .gone to OPTION. it is still displayed. I assumed this is simply me forgetting some basic principle of html. Nevertheless, I can’t figure it out.

    Nope, <option>s just don’t support styling via CSS. Either disabled it, or remove it from the DOM entirely.

    • 0