用类隐藏 <option>答案

【问题标题】：hide <option> with class用类隐藏 <option>
【发布时间】：2013-01-06 03:58:10
【问题描述】：

我相信这真的很简单。但这对我不起作用。

我写了一个表单，允许用户使用标签从列表中选择月份：

<select> <option>

onchange 类.gone 从SELECT 被删除，从而显示列表。 onchanve .gone 从年份 INPUT 中删除，从而显示年份。

我使用 PHP 将年份的值设置为当前年份。我想将月份的值和 addClass .gone 添加到第 31 天的 OPTION 标记（以及 2 月的 29 和 30），这样 2 月 30 日等就不是一个选项。我将通过 4==0 % 年份的值来检查闰年，然后不 addClass .gone 到 2 月 29 日。基本日期选择表单。

问题：当我将类 .gone 添加到 OPTION 时，它仍然显示。我认为这只是我忘记了 html 的一些基本原则。不过，我想不通。

CSS：

.gone {display:none;}

我也可以用这个：

.hidden {visibility:hidden;}

但这仍然显示空间，所以我没有使用它。

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>

onchange javascript 和 php 也完全按照我想要的方式工作。我没有费心编写任何脚本来让日子出现或消失，因为简单地将.gone 类放在OPTION 标记中不起作用。有没有办法让它隐藏或不可选？一旦我弄清楚这一点，我将编写脚本以根据月份和年份实现它。

感谢大家的帮助！

更新！！！

根据收到的答案。我将禁用我不想使用 javascript 选择的日期。从 w3schools.com 我得到了一个示例脚本，我稍作修改，并设置为从 SELECT 月份调用 onchange。

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

效果很好。现在第 30 天和第 31 天不可选了！

【问题讨论】：

您不能隐藏或设置选项，它们是由操作系统渲染的。

标签： javascript html css forms option

【解决方案1】：

问题：当我将类 .gone 添加到 OPTION 时。它仍然显示。我认为这只是我忘记了 html 的一些基本原则。不过，我想不通。

不，<option>s 只是不支持通过 CSS 设置样式。要么disabled它，要么remove it from the DOM entirely。

【讨论】：

请注意，disabled options 仍在渲染中。
啊哈！！！我知道我错过了一些东西。我打算尝试的另一条路线，有没有办法让javascript在它前面添加

【解决方案2】：

如果您将disabled 属性添加到该选项，它将禁用它，使其无法选择

<option disabled>Value</option>

示例：http://jsfiddle.net/BCk8m/

【讨论】：

但它仍然被渲染，不是吗？