복수 선택 요소의 모든 첫 번째 옵션 선택

Question

여러 개의 select 요소가있는 html 파일이 있습니다. 필요한 것은 select 요소의 모든 첫 번째 옵션의 텍스트가 jQuery로 변경된다는 것입니다. 대답은 $('select').children().first().html('changed!');입니다. 그러나 이것은 변경되지 않습니다 모두 첫 번째 옵션 텍스트, 첫 번째 텍스트.

이 문제를 해결하는 적절한 방법은 무엇입니까?

Answer 1

사용 .each() :

$('select').each(function() { 
    $(this).children().first().text('changed!'); 
}); 

참고가 <option> 요소의 내용으로,이 경우 text()하지 html()를 사용해야합니다 일반 텍스트로되어있다.

다른 방법으로는 children() 및 first()의 사용을 피하고, 바로 첫 번째 옵션 요소를 선택할 수 있습니다 또한, 첫 번째 .... 선택 nth-child-selector을 사용할 수 있습니다

$('select>option:first-child').each(function() { 
    $(this).text('changed!'); 
}); 

Answer 2

을

선택한 모든 요소의 텍스트를 변경하려면 다음을 사용할 수 있습니다 :

$('select option:nth-child(1)').text('changed'); 

또는 :

$('select option:nth-child(1)').text(function(index, text) { 
    return 'changed'; 
}); 

이는 jQuery가 text-function을 제공하기 때문입니다.

코드 조각 :

$(function() { 
 
    //$('select option:nth-child(1)').text('changed'); 
 

 
    // or 
 
    $('select option:nth-child(1)').text(function(index, text) { 
 
    return 'changed'; 
 
    }); 
 
});

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 

 
<select> 
 
    <option value="volvo">Volvo</option> 
 
    <option value="saab">Saab</option> 
 
    <option value="mercedes">Mercedes</option> 
 
    <option value="audi">Audi</option> 
 
</select> 
 
<select> 
 
    <option value="volvo">Volvo</option> 
 
    <option value="saab">Saab</option> 
 
    <option value="mercedes">Mercedes</option> 
 
    <option value="audi">Audi</option> 
 
</select> 
 
<select> 
 
    <option value="volvo">Volvo</option> 
 
    <option value="saab">Saab</option> 
 
    <option value="mercedes">Mercedes</option> 
 
    <option value="audi">Audi</option> 
 
</select>

이 있습니다

Answer 3

jQuery를 두 가지 옵션이 descants에 반복. 재귀 적으로 반복하지 않는 children()은 직접적인 자식 만 고려한다는 것을 의미합니다. 다른 하나는 재귀 적으로 반복하는 find()는 모든 자식을 직접적인 자식과 함께 고려한다는 것을 의미합니다. 다음과 같이 코드를 변경하면 생각합니다.

$('select').find("option").first().html('changed!'); 

문의 해 주시기 바랍니다. 희망은 돕는다! !!

당신은 모든 선택에 반복해야이 책의 저자는 이러한 목표를 달성하기 위해 들이게 선택한 이유

$("select").each(function(index,item){ 
     $(item).find("option").first().html('changed!'); 
});