Стиль начальной загрузки выберите «заполнитель» по-разному - PullRequest
Новая
       20

Стиль начальной загрузки выберите «заполнитель» по-разному

9 голосов
/ 28 апреля 2019

Мне успешно удалось применить другой стиль к моим обычным элементам выбора, если выбранная опция является первой (заполнитель) с 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>

Кто-нибудь когда-либо был в состоянии достичь этого?

Ответы [ 4 ]

3 голосов
/ 22 мая 2019

Дело в том, что bootstrap-select заменяет <select> на <button> и <<code>option> на <a>.

Это делает ваш код проблемным по двум причинам:

  1. Вы пытаетесь (и, вероятно, преуспеваете) стилизовать скрытые элементы (поскольку option и select скрываются, как только инициируется селектор выбора).
  2. Вы связываетена document.ready вместо инициализации начальной загрузки выберите.

Используйте 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

2 голосов
/ 15 мая 2019

Вы можете сделать все это с чистым 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>
2 голосов
/ 15 мая 2019 
$('select[name=medFilter] option:eq(1)')

используйте этот селектор и примените к нему свой код CSS и установите его в качестве заполнителя.

Это всегда будет выбирать n-й элемент (что вы передали в опции: eq (1))

Надеюсь, это сработает. :)

1 голос
/ 15 мая 2019

Для достижения ожидаемого результата используйте следующие параметры

Параметр 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

...