2010-05-25 149 views
0

我有下面的代码隐藏第一项:如何从一个HTML选择标签

<select> 
    <option value="0">Option 0</option>. 
    <option value="1">Option 1</option> 
    <option value="2">Option 2</option> 
</select> 

当你点击选择我想的第一个项目将不再列出。它也必须适用于所有浏览器。如何才能做到这一点?

谢谢。

+4

听起来你正在使用的第一选项为一个''

+0

标记的外观如何? – Emanuel 2010-05-25 06:06:38

+1

@David - 把它写成答案,因为它是正确的。 – annakata 2010-05-25 06:55:00

回答

0
<select id="selectBox" 
    onFocus="javascript:nullOpt=document.getElementById('nullOpt'); 
      (undefined != nullOpt) ? 
      document.getElementById('selectBox').removeChild(nullOpt) : 
      true;" 
    onBlur="javascript:insertBefore(
          nullOpt, 
          document.getElementById('selectBox').firstChild 
        );"> 
    <option id="nullOpt">Please select...</option> 
    <option>val1</option> 
    <option>val2</option> 
    <option>val3</option> 
</select> 

编辑:增加了新要求的功能,排序。

+0

除非您选择任何项目并且“选择”标签失去焦点如何重新显示第一个元素? – Emanuel 2010-05-25 17:32:11

+0

你没有提到你想重新显示它,我假设如果他们专注于选择框,那么他们会知道在那个时候选择一些东西。您可以将nullOpt指定给另一个变量,并在需要时将其重新添加到Blur上。 – mVChr 2010-05-25 18:33:43

+0

固定显示如何做到这一点,但我认为这将清除他们的选择。您可能想重新考虑您的功能规格。 – mVChr 2010-05-25 20:34:36

0

嗯不知道编辑这样的集合是否会100%的时间工作。如果您不提供选择项目的值,那么您应该能够抛出验证错误,因为没有选择“值”。

<select> 
    <option value="">Select a value...</option> 
    <option value="1">Option 1</option> 
    <option value="2">Option 2</option> 
</select> 

然后使用其中一个JQuery validation libraries来验证它。

+0

我不需要验证。我想仅为信息显示第一个选项。 – Emanuel 2010-05-25 07:07:41

+0

这是'

2

只需在第一个选项中添加display:none即可。第一个选项只会显示为选择框的“标题”,而不会显示在选项中。它适用于Chrome浏览器的Firefox &。

<select> 
 
    <option style="display:none;" value="0">Option 0</option>. 
 
    <option value="1">Option 1</option> 
 
    <option value="2">Option 2</option> 
 
</select>