jquery - 隐藏在 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

该选择器将选择第一个 <option>它发现位于类 .checkb 的元素内的元素，这就是为什么它只删除第一个 <option>从第一个<select> .

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

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

编辑:我对解决此问题的三种方法的效率感到好奇(当前答案中建议的两种方法，以及克里斯托弗·肯尼答案的第三种方法)，因此决定对其进行测试。可以看到结果here .