选择菜单“假”选项

时间:2011-09-14 09:58:31

标签: javascript jquery html select

我想知道,默认情况下是否可以显示“选择一个”作为选定选项,但是当用户点击打开选择菜单时,可以隐藏选项列表?我的意思是,类似placeholder的文本输入字段。反正用js还是别的什么呢?提前致谢

更新

假设我们有选择菜单

<select>
<option value"">Select one...</option>
<option value"1">Option 1 </option>
...
</select>

我要做的是,当用户打开菜单时从选项列表中删除<option value"">Select one...</option>,并在用户关闭菜单时返回默认状态。

2 个答案:

答案 0 :(得分:4)

也许是这样的:

<SELECT NAME="browser" VALUE="" 
  onchange="var opt=this.options[0];if(opt.getAttribute('role')==='placeholder'&&!opt.selected)opt.parentNode.removeChild(opt);">
    <option role="placeholder" value="">Which Web browser do you use most often?</option>
    <OPTGROUP LABEL="Firefox">
      <OPTION LABEL="2.0 or higher">
        Firefox 2.0 or higher
      </OPTION>
      <OPTION LABEL="1.5.x">Firefox 1.5.x</OPTION>
      <OPTION LABEL="1.0.x">Firefox 1.0.x</OPTION>
    </OPTGROUP>
    <OPTGROUP LABEL="Microsoft Internet Explorer">
      <OPTION LABEL="7.0 or higher">
        Microsoft Internet Explorer 7.0 or higher
      </OPTION>
      <OPTION LABEL="6.x">Microsoft Internet Explorer 6.x</OPTION>
      <OPTION LABEL="5.x">Microsoft Internet Explorer 5.x</OPTION>
      <OPTION LABEL="4.x">Microsoft Internet Explorer 4.x</OPTION>
    </OPTGROUP>
    <OPTGROUP LABEL="Opera">
      <OPTION LABEL="9.0 or higher">Opera 9.0 or higher</OPTION>
      <OPTION LABEL="8.x">Opera 8.x</OPTION>
      <OPTION LABEL="7.x">Opera 7.x</OPTION>
    </OPTGROUP>
    <OPTION>Safari</OPTION>
    <OPTION>Other</OPTION>
  </SELECT>
带有自定义标记OPTION

role="placeholder"必须先放在SELECT内才能正常使用。

答案 1 :(得分:2)

这样的东西?

<form>
<select onchange="document.getElementById('placeholder').disabled=true">
   <option selected="selected" id="placeholder">please select something</option>
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
</select>
</form>

在此示例中,该选项对用户仍然可见,但不可点击。