样式 bootstrap-select "placeholder" 不同

Question

如果 selected 选项是带有 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 并且上面的代码根本不起作用。

我正在尝试找到一种方法来应用与我的正常 selects 相同的逻辑：如果选项 selected 是第一个，则将输入样式设置为斜体并使用不同的颜色一。这是这样的示例 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

$('select[name=medFilter] option:eq(1)')

使用此 select 或将您的 css 代码应用于此并设置为占位符。

这将始终是 select 第 n 个元素（你在 option:eq(1) 中传递的内容）

希望这会奏效。 :)

Answer 2

您可以使用纯 css 来完成所有这些操作，这比使用 js 更易于管理。如果选择的选项是第一个，则以下样式将输入设置为斜体和不同的颜色。

我举了两个例子，一个有disabled和hidden属性，另一个没有disabled和hidden属性。

select option {
  color: #000000;
  font-style: normal;
}

select:invalid, select option[value=""] {
  color: red; /* Or any color you want */
  font-style: italic;
}

.form-control {
  margin: 20px 0px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css" />

<select required class="form-control selectpicker" id="medFilter" name="medFilter" title="Select Med">
  <option selected value="">Search Med</option>
  <option value="med-1">Med 1</option>
  <option value="med-2">Med 2</option>
  </option>
</select>
<select required class="form-control selectpicker" id="medFilter2" name="medFilter2" title="Select Med 2">
  <option selected disabled hidden value="">Search Med - Another</option>
  <option value="med-1">Med 1</option>
  <option value="med-2">Med 2</option>
  </option>
</select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

Answer 3

要达到预期结果，请使用以下选项

选项 1：使用 CSS ，将颜色和字体样式设置为 select 标题和 select 第一个选项

select[title]{
  color: green;
  font-style: italic;
}

<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 value="A">AA</option>
                                        </select>

选项 2： 使用 jquery 的添加 class 作为 select 标题和选项第一个 child

$("select[title]").addClass('selectStyle')

.selectStyle{
  font-style: italic;
  color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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 value="A">AA</option>
                                        </select>

codepen - https://codepen.io/nagasai/pen/qGrqPR

Answer 4

问题是 - bootstrap-select 将 <select> 替换为 <button> 并将 <option> 替换为 <a>。

这会使您的代码出现问题，原因有二：

您尝试（并且可能成功）设置隐藏元素的样式（因为 option 和 select 一旦 select选择器启动。）
您正在绑定到 document.ready 而不是 bootstrap select.

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

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

HTML（注意 bs-placeholder class 对于 bootstrap-select 是 out-of-the-box 当它没有值时，你不需要添加它。):

<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

样式 bootstrap-select "placeholder" 不同

Style bootstrap-select "placeholder" differently

jquery

html

css

placeholder

bootstrap-select