JQuery ：仅当 selected 元素是第一个元素（占位符）时，才将所有 select 元素设置为斜体

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>

这只适用于一个 select 元素，但我有 3 或 4 个页面。我知道您可以使用类似这样的方法定位所有 selects :

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

我如何调整第二个示例并告诉它仅在第一个元素被 selected 时应用样式？

Answer 1

根据您的第一个示例和要求，我假设您想迭代 select DOM 个元素并检查是否选择了一个值。

你可以用 each loop:

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');    
      }
  });
}

这里是a working example。

Answer 2

如果您希望它在有人更改 select 语句中的选项时更改。你可以做的是：

// 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'});
    }
});

如果你想从页面加载中得到它，我推荐阿隆阿德勒的答案。

Answer 3

我建议对任何样式使用 CSS class。这就是 "style sheets" 的用途。然后，只需要一个函数，从每个 select 中删除 class，然后将其添加回具有第一个选项 select 的那些。（如果需要，您可以使用 :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

我看到您正在使用 Thymeleaf, if so, then you can also use ，不需要任何其他 JavaScript。

通过添加 th:style="${cabinetFilter==''} ? 'font-style:italic' : 'font-style:normal'" 更改您的 select（我在这里假设您的默认值为空字符串，如果它是 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>

JQuery ：仅当 selected 元素是第一个元素（占位符）时，才将所有 select 元素设置为斜体

JQuery : Style all select elements to italic only if the selected element is the first one (placeholder)

html

javascript

css

jquery

html-select