样式引导程序-选择“占位符”不同

Question

如果选定的选项是jQuery的第一个（占位符），则我已经成功地将不同的样式应用于普通的select元素，如下所示：

<script type="text/javascript">
        $(document).ready
        (
            function () 
            {
                $('select').each(function (index, value)
                {
                    if($(this).val()==="")
                    { 
                        $(this).css('font-style', 'italic');
                        $(this).css('color', '#636c72');
                        $(this).children().css('font-style', 'normal');   
                    }
                    else
                    {
                        $(this).css('font-style', 'normal');
                        $(this).css('color', 'black');
                        $(this).children().css('font-style', 'normal');    
                    }
                });
            }
        );
    </script>

但是，由于其中包含的条目数量庞大（可能是数千个），并且有必要使用文本搜索来缩小条目范围，因此我的某些表格正在使用bootstrap-select组件。这些组件会产生更复杂的HTML，并且以上代码根本无法工作。

我试图找到一种方法来应用与普通选择相同的逻辑：如果所选的选项是第一个选项，则以斜体和不同的颜色设置输入的样式。这是此类select的示例：

<select class="form-control selectpicker" id="medFilter" name="medFilter" th:value="${medFilter}"
                                            onchange="this.form.submit()" data-live-search="true" title="Select Med"> 
                                            <option value="">Search Med</option>
                                            <option th:each="med : ${meds}" th:value="${med.id}" 
                                                th:text="${med.toString()}" th:selected="${med.id == medFilter}">
                                                </option>
                                        </select>

有没有人能够做到这一点？

Answer 1

事情是 -bootstrap-select替换<select>to<button>和 < option> to <a>。

这使您的代码有问题，原因有两个：

1. 您尝试（并且可能成功）设置隐藏元素的样式（option并且select在 selectpicker 启动后立即被隐藏。）
2. 您绑定到document.ready而不是引导选择的初始化。

使用 CSS 来设置新元素而不是旧元素的样式：

a.placeholder, button.bs-placeholder {
  font-style: italic !important;
  color: #636c72;
}

HTML（请注意，bs-placeholder当 bootstrap-select 没有值时，类是开箱即用的，您不需要添加它。）：

<select required class="form-control selectpicker" id="medFilter" name="medFilter" title="Select Med">
      <option class="placeholder" selected value="">Search Med</option>
      <option value="med-1">Med 1</option>
      <option value="med-2">Med 2</option>
</select>

只要它可以用 css 存档，我就会放弃document.ready样式方法。

Plunkr：https ://plnkr.co/edit/EAbTMz1WQnFWwtLsmYbZ ? p = preview