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>替换为<button>，将<option>替换为<a>。

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

您尝试（而且很可能成功）设置隐藏元素的样式（当selectpicker启动时，option和select被隐藏了）。
您要绑定到document.ready，而不是初始化bootstrap select。

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

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

HTML（请注意，bs-placeholder类是现成的，可以在没有值的情况下进行引导选择，因此不需要添加它。）：

<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

Answer 2

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

使用此选择器，并将您的CSS代码应用于此，并设置为占位符。

这将始终选择第n个元素（您在option：eq（1）中传递了什么）

希望这会起作用。：）

Answer 3

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

我给出了两个示例，一个带有禁用和隐藏属性，另一个没有禁用和隐藏属性。

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 4

要获得预期结果，请使用以下选项

选项1 ：使用CSS设置颜色和字体样式以选择标题并选择第一个选项

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的添加类选择标题和选项的第一个孩子

$("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

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

4 个答案: