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

Question

我有一些代码问题.基本上我想删除<select>使用jQuery 的第一个选项,这是有效的,但仅适用于第一个选择.如果我有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,这就是为什么它只<option>从第一个元素中删除第一个元素<select>.

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

$('.checkb option:nth-child(1)').attr('hidden', 'hidden');

编辑:我很好奇三种方法解决这个问题的效率(当前答案中提出的两个方法,以及克里斯托弗肯尼答案的三分之一),所以决定测试它.你可以在这里看到结果.