默认书写，在 Bootstrap 选择栏上 HTML答案

【问题标题】：Default Writing, On a Bootstrap selection bar HTML默认书写，在 Bootstrap 选择栏上 HTML
【发布时间】：2015-10-03 00:38:25
【问题描述】：

在我的默认选择中，它显示“选择类型”列表中的第一个元素。这就是我想看到它的方式，但我不希望它（“选择一个流派”）可以在列表中选择和看到

        <div class="wrapper">   

                <select id="first-disabled" class="selectpicker" data-hide-disabled="true" data-live-search="true">
                <optgroup  >
                <option>Select a Genre</option>
                </optgroup>
                <optgroup label="Rock">
                  <option>Punk Rock</option>
                  <option>Hard Rock</option>

                </optgroup>
                <optgroup label="Pop">
                  <option>Turkish Pop</option>
                  <option>English Pop</option>
                </optgroup>

              </select>

        </div>

  .wrapper {
  position: relative;
  top: 326px;
  left: -42px;
  height: 100%;
  width: 100%;
  z-index: 10;
  text-align: center;
}

从代码中可以看出，我的第一个选项似乎是默认选择。如您所见，我的选择条形码后面的 div 包装器 css。我使用自定义引导栏。正如它可以在图像中看到的那样，它可以在选项列表中看到和选择。

图片如下：

【问题讨论】：

标签： html twitter-bootstrap

【解决方案1】：

您可以通过向其添加属性disabled 使其不可选择。

<option value="" disabled="disabled">Select a Genre</option>

关于从列表中隐藏它，我不相信你可以在本地做到这一点。您可能可以使用 javascript，但不能使用严格的 HTML。如果是我，我会坚持在列表中显示它的原生 HTML 语义。

关于 SO 的其他问题可能会有所帮助：A Placeholder for the `select` tag?

更新：

也许你可以使用内联样式隐藏它？

<option value="" disabled="disabled" style="display:none;">Select a Genre</option>

http://jsfiddle.net/11dpc8m7/

【讨论】：

我检查了那个问题并尝试了演示，我猜它很相似但不一样，问题仍然存在。我想这不能通过仅使用 html 使“选择流派”选项从列表中消失来完成
否，因为列表中的选项默认显示在那里。但是您至少可以将第一个禁用，因此一旦打开菜单就无法选择它。
您可以为其添加内联样式以使其不显示？
看看这个小提琴：jsfiddle.net/sebastianbrosch/w1o2f7yy - 在这里工作
是的，我刚刚用类似的方法更新了我的答案。嗯，同样的方法，不同的方法。不过它似乎有效！

【解决方案2】：

试试这个：

<div class="wrapper">   
    <select id="first-disabled" class="selectpicker" data-hide-disabled="true" data-live-search="true">
        <optgroup class="hidden">
            <option disabled selected>Select a Genre</option>
        </optgroup>
        <optgroup label="Rock">
            <option>Punk Rock</option>
            <option>Hard Rock</option>
        </optgroup>
        <optgroup label="Pop">
            <option>Turkish Pop</option>
            <option>English Pop</option>
        </optgroup>
    </select>
</div>

加上这个额外的 CSS

.hidden {
    display:none;
    visibility:hidden;
}

这个解决方案的一个小技巧：https://jsfiddle.net/sebastianbrosch/w1o2f7yy/

【讨论】：

它写的是“Nothing selected”而不是“Select a Genre”

【解决方案3】：

先生，你可以试试这个：

<label>Type of Business</label>
<select class="form-control">
   <optgroup  >
                <option>Select a Genre</option>
                </optgroup>
                <optgroup label="Rock">
                     <option disabled>──────────</option>
                  <option>Punk Rock</option>
                  <option>Hard Rock</option>

                </optgroup>
                <optgroup label="Pop">
                    <option disabled>──────────</option>
                  <option>Turkish Pop</option>
                  <option>English Pop</option>
                </optgroup>
</select>

DEMO FIDDLE

【讨论】：