Question

我遇到了一些代码问题。基本上我想使用jQuery从<select>中删除第一个选项，这是有效的，但仅适用于第一个选择。如果我有3个下拉列表，则代码仅适用于第一个。我试图使用.each，但说实话，我真的不知道在哪里，这甚至会有所帮助。这是一个html：

      <select class="checkb" name="gender">
     <option disabled value="">Gender</option>
     <option value="male">Male</option>
     <option value="female">Female</option>
  </select>  

  <select class="checkb" name="age">
     <option disabled value="">Age</option>
     <option value="under 13">Under 13</option>
     <option value="13-17">13-17</option>
     <option value="18-24">18-24</option>
     <option value="25-44">25-44</option>
     <option value="45-64">45-64</option>
     <option value="65+">65+</option>
  </select>  

  <select class="checkb" name="cinema">
     <option disabled value="">Select your cinema</option>
     <option value="001">Cinema 1</option>
     <option value="002">Cinema 2</option>
     <option value="003">Cinema 3</option>
  </select>

这是jquery：

    $(".checkb option:first").attr('hidden','hidden');

它完全隐藏了“性别”文字，但并未隐藏“年龄”和“选择你的电影”。

提前谢谢。

Answer 1

好:first告诉jquery只对第一个子进行操作（在这种情况下是该类的第一个元素），所以删除它并使你的代码如下：

$('.checkb').each(function () {
  $(this).children('option:first').attr('hidden','hidden');
});

Answer 2

该选择器会选择它在类<option>的元素中找到的第一个.checkb元素，这就是为什么它只从第一个{{1}中移除第一个<option> }。

您可以改为使用:nth-child()选择器获取所有<select>元素，这些元素是该类<option>的第一个子元素：

<select>

编辑：我很好奇三种解决方法的效率（当前答案中提出的两种方法，以及克里斯托弗肯尼答案的三种方法），因此决定对其进行测试。您可以看到结果here。

隐藏在SELECT中的第一个选项仅适用于第一个选择，而不适用于所有选择

2 个答案: