有没有办法为 HTML 下拉菜单设置说明文本但不用作选项？答案

【问题标题】：Is there a way to set the instruction text for HTML dropdown but not used as an option?有没有办法为 HTML 下拉菜单设置说明文本但不用作选项？
【发布时间】：2015-02-10 16:33:47
【问题描述】：

我在 JavaScript 中实现下拉菜单时遇到了困难。通常，我们将通过设置来实现 HTML 下拉列表的默认值：

 <option selected> blablabla </option>

但是，现在我收到了一个新请求，该请求用于在最终用户做出选择之前让下拉菜单向她/他显示一些有用的说明文本。下拉选项也将被填充。但是，这条说明文本不会用作选项。因此，每当用户折叠下拉菜单时，他/她将无法选择此说明文本。

目前我写的代码是：

for(var i=0;i<jsondata.length;i++){
        dropDown.append('<option  value="'+jsondata[i]   +'">'+jsondata[i]+'</option>');
    }
dropDown.append('<option selected>Please select a proper organization</option>');

但是，这并不好用，因为它会将说明文本作为单独的选项。

不知道有没有办法在 JavaScript 中实现这一点？

【问题讨论】：

到目前为止您尝试过什么？您能否发布一些代码，以便我们尝试解决它。谢谢！
@GibboK，更新了一些代码。
“在最终用户做出选择之前，让下拉菜单向她/他显示一些有用的说明文本”——而不是通过使用虚假选项“隐藏”它，你应该考虑使用label。

标签： javascript jquery html drop-down-menu

【解决方案1】：

您只能使用 html 来实现这一点。只需制作说明选项disabled

看到这个。 http://jsfiddle.net/z8pfk2bg/

<select>
  <option value="volvo" disabled selected>please select a car</option>
  <option value="saab">Saab</option>
  <option value="vw">VW</option>
  <option value="audi">Audi</option>
</select>

在>IE7 中也得到了很好的支持，如果您使用 javascript 填充选项http://jsfiddle.net/33dd3mfx/

【讨论】：

【解决方案2】：

您可以用<optgroup> 包裹<option> 元素，其中label 设置包裹<option>s 组的显示文本：

var dropdown = $('#demo'),
  opts = ['A', 'B', 'C'];

for (var i = 0, len = opts.length; i < len; i++) {
  dropdown.append('<option value="' + opts[i] + '">' + opts[i] + '</option>');
}

dropdown.find('option').wrapAll('<optgroup label="Select a letter"></optgroup>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="demo"></select>

这种方法的缺点是“标签”文本（您的“请选择适当的组织”）在用户聚焦<select> 元素之前不会可见，这与使用禁用的<option> 不同.

参考资料：

<optgroup>。

【讨论】：