> 웹 프론트엔드 > JS 튜토리얼 > jQuery는 어떻게 HTML 요소에 옵션을 효율적으로 추가할 수 있나요?

jQuery는 어떻게 HTML 요소에 옵션을 효율적으로 추가할 수 있나요?

Susan Sarandon
풀어 주다: 2024-11-24 21:13:14
원래의
450명이 탐색했습니다.

How Can jQuery Efficiently Add Options to an HTML `` Element?

HTML의 jQuery를 사용한 드롭다운 메뉴는 특히 유용한 것으로 입증되었습니다. 이 문서에서는 이 작업을 수행하는 가장 효과적인 접근 방식을 살펴봅니다.

간단한 방법

처음에는 다음 코드를 사용하여 옵션을 추가하는 것을 고려할 수 있습니다.

$("#mySelect").append('<option value=1>My option</option>');
로그인 후 복사

이 접근 방식은 기술적으로는 작동할 수 있지만 더 효율적인 구문이 있습니다. 권장 사항:

$('#mySelect').append($('<option>', {
  value: 1,
  text: 'My option'
}));
로그인 후 복사

이 기술은 옵션 요소(

옵션 일괄 추가

항목 모음에서 여러 옵션을 추가해야 하는 시나리오에서는 보다 효율적인 접근 방식이 있습니다. 사용 가능:

$.each(items, function (i, item) {
  $('#mySelect').append($('<option>', { 
    value: item.value,
    text : item.text 
  }));
});
로그인 후 복사

여기서 jQuery의 $.each() 메서드는 컬렉션(항목)을 반복하여 각 항목에 대한 옵션 요소를 생성하고 추가합니다. 이렇게 하면 모든 옵션이