【问题标题】:Select menu "fake" option选择菜单“假”选项
【发布时间】:2011-11-16 21:13:16
【问题描述】:

我想知道,是否可以默认显示“选择一个”作为选定选项,但在用户单击打开选择菜单时从选项列表中隐藏?我的意思是,类似于placeholderfor 文本输入字段。无论如何用js或其他东西来做吗?提前致谢

更新

假设我们有选择菜单

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

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

【问题讨论】:

  • 你能提供一个更好的例子吗 - 你的问题没有得到很好的答案因为它不够清楚
  • 我的意思是,当用户单击打开选择菜单时删除此选项,并在用户关闭菜单时返回默认状态。清楚了吗?
  • 不,不清楚,您应该单击“编辑”以通过示例改进和澄清您的问题。
  • 更新问题。请看一下
  • this 类似的问题,只是该问题不想让不可选择的标题消失。

标签: javascript jquery html select


【解决方案1】:

这样的?

<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>

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

【讨论】:

  • 没有。当用户单击打开选择菜单时删除此选项,并在用户关闭菜单时返回默认状态。清楚了吗?
  • 也许onfocus / onblur 那么呢? onfocus 删除节点, onblur 再次绑定它。但是,当您在用户单击菜单时删除“假”选项后,他将无法再次选择该“假”选项(因为任何时候他再次单击它,该选项都会被删除),那么您为什么要这样做那个?
  • disabled OPTION 的属性在 JavaScript 中具有布尔值。更有效的是将其设置为true|false:document.getElementById('placeholder').disabled=true; MDN:developer.mozilla.org/en/DOM/HTMLOptionElement
  • @qbk 您的代码是正确的,因为在 javascript 中:"disabled" 用作 true"" 用作 false。但更适合将truefalse 用于disabled
【解决方案2】:

可能是这样的:

<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>

带有自定义标签role="placeholder"OPTION必须首先放在SELECT中才能正常工作。

【讨论】:

  • 是的。类似的东西。但是我们能否在关闭时恢复此选项,以及如何在页面刷新后将菜单恢复为默认状态?
  • 我们可以用.append(), .remove() 做吗?
  • 将 id 设置为您选择的对象,然后设置theSelect = document.getElementById('selectId'); theSelect.insertBefore(newElement, theSelect.firstChild)。见insertBefore。要让它在页面刷新时执行,请尝试将代码添加到
  • @Tural Teyyuboglu:我不知道像ondropdown 这样的事件SELECT。如果用户使用键盘更改值:制表符、左|右|上|下箭头怎么办?潜力你可以使用onfocus | onblur 事件或 onclick。但这更复杂。在上述解决方案中,当 SELECT 关闭且未选择其他(有效)选项时,placeholder 不会被删除并保持显示。选择有效选项后,为什么需要还原? jsfiddle.net/T4ty3
  • @Tural Teyyuboglu:什么不清楚?什么不工作?请参阅我之前评论的示例链接。我用FF7测试过。你用什么浏览器?
猜你喜欢
  • 2019-07-11
  • 2014-11-28
  • 2014-04-07
  • 2014-04-16
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多