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