JQuery: стиль всех выбранных элементов курсивом, только если выбранный элемент является первым (заполнитель)

Question

Я пытаюсь по-разному оформлять заполнители с помощью JQuery. Я могу сделать это по одному элементу за раз довольно легко, как это:

<script type="text/javascript">
$(document).ready(
  function() {
    var cabinetFilter = document.getElementById("cabinetFilter");
    var value = cabinetFilter.options[cabinetFilter.selectedIndex].value;

    if (value == "") {
      $(cabinetFilter).css('font-style', 'italic');
      $(cabinetFilter).css('color', '#636c72');
      $(cabinetFilter).children().css('font-style', 'normal');
    } else {
      $(cabinetFilter).css('font-style', 'normal');
      $(cabinetFilter).css('color', 'black');
      $(cabinetFilter).children().css('font-style', 'normal');
    }
  }
);
</script>

Это хорошо только для одного элемента выбора, но у меня есть страницы с 3 или 4. Я знаю, что вы можете настроить таргетинг на все варианты выбора, используя что-то вроде этого:

<script type="text/javascript">
$(document).ready(
  function() {
    $('select').css('font-style', 'italic');
  }
);
</script>

Элемент select, о котором идет речь, выглядит следующим образом:

<select class="form-control" id="cabinetFilter" name="cabinetFilter" th:value="${cabinetFilter}"
                                            onchange="this.form.submit()">
                                            <option value="">Search Cabinet</option>
                                            <option th:each="cabinet : ${cabinets}" th:value="${cabinet.id}" 
                                                th:text="${cabinet.toString()}" th:selected="${cabinet.id == cabinetFilter}">
                                                </option>
                                        </select>

Как мне адаптировать второй пример и сказать, чтобы он применял стиль, только если выбран первый элемент?

Answer 1

Я вижу, вы используете Thymeleaf , если это так, то вы также можете использовать условное моделирование , без необходимости дальнейшего JavaScript.

Измените ваш выбор, добавив th:style="${cabinetFilter==''} ? 'font-style:italic' : 'font-style:normal'" (здесь я предполагаю, что значением по умолчанию является пустая строка, если оно равно NULL, вам следует проверить значение ${cabinetFilter==NULL}.

<select class="form-control" id="cabinetFilter" name="cabinetFilter" onchange="this.form.submit()"
    th:value="${cabinetFilter}" 
    th:style="${cabinetFilter==''} ? 'font-style:italic' : 'font-style:normal'" >
        <option value="">Search Cabinet</option>
        <option 
            th:each="cabinet : ${cabinets}" 
            th:value="${cabinet.id}" 
            th:text="${cabinet.toString()}" 
            th:selected="${cabinet.id == cabinetFilter}">
        </option>
</select>

Не забудьте добавить немного css, чтобы вернуть тексты опций не курсивом:

<style>
    select > option{
        font-style: normal;
    }
</style>

Answer 2

В соответствии с первым примером и требованием, я предполагаю, что вы хотите выполнить итерацию по количеству select элементов DOM и проверить, выбрано ли значение или нет.

Вы можете сделать это с каждой петлей :

function checkSelectElements()
{
    $('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', 'red');
        $(this).children().css('font-style', 'normal');    
      }
  });
}

Вот рабочий пример .

Answer 3

Я предлагаю использовать класс CSS для любого стиля.Это своего рода «таблицы стилей».Затем просто есть функция, которая удаляет класс из каждого выбора, а затем добавляет его обратно к тем, у которых выбран первый вариант.(при необходимости вы можете использовать :first-child вместо [value=""].

function updateSelects() {
  $('select').removeClass('unselected');
  $('select').has('option[value=""]:selected').addClass('unselected');
}
$('select').on('change', updateSelects);
updateSelects();

.unselected {
  font-style: italic;
  color: #636c72;
}

.unselected option {
  font-style: normal;
  color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
  <option value="">Select something</option>
  <option value="1">Something</option>
</select>
<select>
  <option value="">Select something</option>
  <option value="1">Something</option>
</select>
<select>
  <option value="">Select something</option>
  <option value="1">Something</option>
</select>
<select>
  <option value="">Select something</option>
  <option value="1">Something</option>
</select>

Answer 4

Если вы хотите, чтобы он изменился, когда кто-то изменил опцию из оператора выбора. Что вы можете сделать, это:

// When a select statement changes check if the option selected has a value of ""
// If so give it an italic style. If not, set it to normal
$(document).on('change', 'select', function() {
    if($(this).val() == '') {
        $(this).css({'font-style':'italic'});
    } else {
        $(this).css({'font-style':'italic'});
    }
});

Если вы хотите получить загрузку страницы, я рекомендую ответ Алона Адлера.