HTML 选择下拉列表答案

【问题标题】：HTML select dropdown listHTML 选择下拉列表
【发布时间】：2011-05-20 01:16:27
【问题描述】：

我想要一个使用 select, option 标签的下拉列表...但是当它第一次出现时我希望它有一个信息，例如“请选择一个名称”，然后用户点击下拉列表并从可用选项中进行选择...我尝试将“请选择名称”作为选项，但随后用户将能够选择此...这不是我想要的。我是否需要使用 javascript 才能拥有此功能或我需要做什么？

如果有 jquery 方法可以做到这一点，这将很有帮助

【问题讨论】：

标签： html

【解决方案1】：

在提交前创建一个 JavaScript 控件，使所选选项与您的第一个选项不同

【讨论】：

【解决方案2】：

将<option value="">- Please select a name -</option> 作为第一个选项并使用 JavaScript（和后端验证）来确保用户选择的不是空值。

【讨论】：

但正如我所说，它会在可以选择的选项列表中显示“请选择一个名称”
我明白这一点。那么你想要什么呢？一个按钮，单击时会被下拉列表替换？（不是讽刺......这将是一个选项，但需要可降解以实现可访问性。）如果您只想坚持使用下拉菜单，我认为除了我提到的之外没有其他方法。

【解决方案3】：

也许这可以帮助您在没有 JavaScript 的情况下解决 http://htmlhelp.com/reference/html40/forms/option.html

查看禁用选项

【讨论】：

这比一些 javascript hack 更合适。我相信您必须将其选中并禁用。此外，您可以使用 javascript 添加 disabled 属性。

【解决方案4】：

我想很简单。 onclick 属性很好用...

<select onchange="if(this.value == '') this.selectedIndex = 1; ">
  <option value="">Select an Option</option>
  <option value="one">Option 1</option>
  <option value="two">Option 2</option>
</select>

选择不同的选项后，如果选择了第一个选项，则会选择选项 1。如果您想了解有关 javascript 的说明，请询问。

【讨论】：

你真的不需要 JS，只需要基本的 HTML :)
他说 jQuery 没问题，所以为什么不使用客户端验证。除非它是敏感信息，否则无需进行服务器端验证。编辑：看到你的帖子。你是对的。忘记了您可以禁用特定选项。

【解决方案5】：

试试这个：

<select>
    <option value="" disabled="disabled" selected="selected">Please select a name</option>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

当页面加载时，默认选择此选项。但是，一旦单击下拉菜单，用户将无法重新选择此选项。

希望这会有所帮助。

【讨论】：

@smci 在我发布此内容时，我在 FF 中对其进行了测试，结果与描述的完全一样。虽然不确定我当时使用的是什么版本，但我刚刚在 FF 8.0 中测试过它仍然有效。
嗯。至少它不适用于 Mozilla Firefox for Ubuntu canonical 1.0
如果结合this这个答案是完美的
此选项不起作用。使用 Musa 的选项并对选定的值进行验证。
@BBi7：刚刚在 Win 8.1 和 Win 10 上的 FF 43、Chrome 47 和 IE11 以及 Win 10 上的 Edge 中再次测试了该解决方案。它仍然完全按照描述的方式工作。提及该解决方案不适用于您的浏览器和操作系统将有助于其他人决定是否使用它。

【解决方案6】：

这就是我使用 JQuery 的方式...

使用 jquery-watermark 插件 (http://code.google.com/p/jquery-watermark/)

$('#inputId').watermark('Please select a name');

像魅力一样工作！！

在那个 google 代码站点上有一些很好的文档。

希望这会有所帮助！

【讨论】：

这个只兼容 HTML input 和 textarea 元素！

【解决方案7】：

<select>
    <option value="" style="display:none">Choose one provider</option>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

这样用户看不到这个选项，但它显示在选择框中。

【讨论】：

在 Mac 10.8.5 上，这适用于 Firefox 24.0 和 Opera 18.0，但不适用于 Chrome 29.0 或 Safari 6.1.1。
哇，这简直太棒了！它适用于 Windows 上的 Chrome。谢谢。
这个问题在于它在选项列表的底部放置了一个很大的空间。但它确实有效，只要你对这类事情不太挑剔。 +1

【解决方案8】：

很抱歉删除旧帖子 - 但我找到了更好的方法

我相信这张海报想要的是：

<label for="mydropdown" datalabel="mydropdown">Country:</label>    
<select name="mydropdown">
    <option value="United States">United States</option>
    <option value="Canada">Canada</option>
    <option value="Mexico">Mexico</option>
    <option value="Other">Not Listed</option>
</select>

我在寻找相同答案时在另一篇文章中找到了此信息 - 谢谢

【讨论】：

【解决方案9】：

  <select name="test">
      <option hidden="true">Please select a name</option>
      <option value="Cash">Cash</option>
      <option value="Draft">Demand Draft No.</option>
      <option value="Cheque">Cheque No.</option>
  </select>

【讨论】：

【解决方案10】：

这是一个旧帖子，但这对我有用

<select>
  <option value="" disabled selected>Please select a name...</option> 
  <option>this</option>
  <option>that</option>
</select>

【讨论】：

IMO 这是最正确的方法，可能应该是公认的答案。 Javascript 解决方案是不必要的。

【解决方案11】：

<select>
    <option value="" disabled="disabled" selected="selected">Please select name</option>
  <option value="Tom">Tom</option>
  <option value="Marry">Marry</option>
  <option value="Jane">Jane</option>
  <option value="Harry">Harry</option>
</select>

【讨论】：

【解决方案12】：

如果你想为 jquery-ui 的 selectmenu 控件实现同样的效果，那么你必须在打开的事件处理程序中设置 'display: none' 并将 '-menu' 添加到 id 字符串。

<select id="myid">
<option value="" disabled="disabled" selected="selected">Please select     name</option>
 <option value="Tom">Tom</option>
 <option value="Marry">Mary</option>
 <option value="Jane">Jane</option>
 <option value="Harry">Harry</option>
 </select>

$('select#listsTypeSelect').selectmenu({
  change: function( event, data ) {
    alert($(this).val());
},
open: function( event, ui ) {
    $('ul#myid-menu li:first-child').css('display', 'none');
}
});

【讨论】：

【解决方案13】：

<select>
  <option value="" disabled selected hidden>Select an Option</option>
  <option value="one">Option 1</option>
  <option value="two">Option 2</option>
</select>

【讨论】：

【解决方案14】：

    <select>
         <option value="" disabled="disabled" selected="selected">Please select a 
              developer position</option>
          <option value="1">Beginner</option>
          <option value="2">Expert</option>
     </select>

【讨论】：