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

을 선택 것 그 클래스 .checkb이있는 요소 내에있는 첫 번째 <option> 요소를 선택하십시오. 이는 첫 번째 <select>에서 첫 번째 <option> 만 제거하는 이유입니다.

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

편집 :

는 대신 그 클래스와 <select>의 첫 번째 자식 모든 <option> 요소를 얻기 위해 :nth-child() 선택기를 사용할 수 있습니다 내가 이것을 해결하는 세 가지 방법의 효율성에 대한 호기심이었다 (현재 답변에서 제안 된 두 가지뿐만 아니라 크리스토퍼 케니의 대답의 변형 인 세 번째)도 테스트 해보기로했습니다. 결과는 here입니다.

Answer 2

잘 :first는 첫 번째 자식에 유일한 행위 (그리고 클래스의 첫 번째 요소의 경우) 그래서 그것을 제거하고 다음과 같이 코드를 만들 jQuery를 알려줍니다

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