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

Posted 2023-03-05

【中文标题】样式引导程序选择不同的“占位符”

【英文标题】：Style bootstrap-select "placeholder" differently

【发布时间】：2019-09-17 09:03:57

【问题描述】：

如果选择的选项是 jQuery 的第一个（占位符），我已经成功地为我的正常选择元素应用了不同的样式：

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

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

【问题讨论】：

为什么不用 CSS 做这一切？

【参考方案1】：

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

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

您尝试（并且可能成功）设置 hidden 元素的样式（因为 option 和 select 在 selectpicker 启动后立即被隐藏。） 您正在绑定到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

【讨论】：

你先生是大佬！

【参考方案2】：

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

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

这将始终选择第 n 个元素（你传入的选项：eq(1)）

希望这会奏效。 :)

【参考方案3】：

你可以用纯 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>

【参考方案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

【讨论】：

由于某种原因，当我为我选择第一个选项时，这只会设置列表中的实际选项，而不是选择元素本身。

这是因为 .selectStyle 被添加到 Naga 代码中的 option 中，然后 bootstrap-select 将其复制到它在初始化时创建的 <a> 元素中。它与select 的工作方式不同。请参考我的回答。

@Martin，更新了我对仅样式选择选项的回答