Question

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

如果有一种jquery方式来做到这一点，那将非常有用

Answer 1

试试这个：

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

页面加载时，默认选择此选项。但是，只要单击下拉列表，用户就无法重新选择此选项。

希望这有帮助。

Answer 2

<option value="" style="display:none">Choose one provider</option>

这样，用户无法看到此选项，但会在选择框中显示。

Answer 3

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

Answer 4

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

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

Answer 5

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

Answer 6

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

请参阅DISABLE选项

Answer 7

简单，我想。 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的解释，请问。

Answer 8

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

Answer 9

如果你想为jquery-ui selectmenu控件实现相同的功能，那么你必须在open事件处理程序中设置'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');
}
});

Answer 10

我很遗憾地发现了一篇旧帖子 - 但我找到了一个更好的方法来做到这一点

我认为这张海报想要的是：

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

我在搜索同样的答案时在另一篇文章中发现了这些信息 - 谢谢

Answer 11

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

Answer 12

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

Answer 13

这是我用JQuery做的...

使用jquery-watermark插件（http://code.google.com/p/jquery-watermark/）

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

就像一个魅力!!

谷歌代码网站上有一些很好的文档。

希望这有帮助！

HTML选择下拉列表

14 个答案: