Question

我需要将userFirstChoice类添加到用户选择的第一个选项中。 .userFirstChoice的CSS只是对列表中的第一个选项进行了一些视觉上的更改，以突出显示它的第一选择。

如何使用jQuery实现这一点，我们只将addClass添加到下拉列表中的第一个选项而不是其他任何选项？如果它是取消选择的最后一项，它还需要删除该类。

抱歉，我对jQuery并不擅长，我搜索的大多数结果导致：first-child在页面加载的第一个选项上显示不同的内容。我需要点击一下。

<select id="favoriteColors" multiple>
    <option value="blue">Blue</option>
    <option value="red">Red</option>
    <option value="yellow">Yellow</option>
    <option value="green">Green</option>
    <option value="black">Black</option>
</select>

因此，当有人选择他们的第一种颜色时，它会添加class =＆＃34; userFirstChoice＆＃34;仅限第一个选项（不是他们的第二个选项）。

因此，如果有人首先点击黄色，它将如下所示：

<select id="favoriteColors" multiple>
    <option value="blue">Blue</option>
    <option value="red">Red</option>
    <option value="yellow" class="userFirstChoice">Yellow</option>
    <option value="green">Green</option>
    <option value="black">Black</option>
</select>

由于

Answer 1

您可以通过检查选项是否包含类option.userFirstChoice

来执行此操作

如果没有，那么我们可以将它添加到选定的第一个元素$(this).find("option:selected").addClass("userFirstChoice")

这样我们就不必在页面上使用任何类型的变量。

$('#favoriteColors').change(function() {
  if ($(this).find("option.userFirstChoice").length == 0) {
    $(this).find("option:selected").addClass("userFirstChoice")
  }
})

.userFirstChoice{color:blue}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="favoriteColors" multiple>
    <option value="blue">Blue</option>
    <option value="red">Red</option>
    <option value="yellow">Yellow</option>
    <option value="green">Green</option>
    <option value="black">Black</option>
</select>

jQuery addClass仅限于多选下拉列表中的第一个选定子项

1 个答案: