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

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

那选择会选择第一个<option>元素，它发现它在类别.checkb的元素中，这就是为什么它只从第一个<select>中删除第一个<option>。

你也可以使用的:nth-child()选择让所有<option>元素是<select>与该类的第一个孩子：

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

编辑：我很好奇的三种方法的效率来解决这个（这两个建议在当前的答案，以及第三个是克里斯托弗肯尼的答案变化），所以决定测试它。你可以看到结果here。

Answer 2

井:first在第一个孩子告诉了jQuery只有行为（在这种情况下类的第一个元素），因此将其删除，并让你的代码如下所示：

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