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

Question

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

 <option selected> blablabla </option>

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

到目前为止我写的代码是：

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中是否有办法实现这个？

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

填充选项

Answer 2

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

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>

这种方法的缺点是，与使用禁用 <option>.

参考文献：

<optgroup>.

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

Is there a way to set the instruction text for HTML dropdown but not used as an option?

html

javascript

jquery

drop-down-menu