jQuery를 사용하여 선택 태그의 옵션 제거, 추가 및 선택
이 문서에서는 세 가지 고유한 기능에 중점을 둘 것입니다. 첫 번째는 옵션 추가, 두 번째는 옵션 제거, 세 번째는 동일한 코드 내에서 두 작업을 모두 수행하는 것입니다.
오늘의 기사는 select 태그의 기존 옵션을 모두 삭제한 다음 새 옵션을 추가하고 선택하는 것을 목표로 합니다. 이러한 모든 작업은 jQuery의 도움으로 수행되어야 합니다. 우리는 작은 단계로 갈 것입니다.
먼저 옵션을 추가하는 방법을 연구하고, 옵션을 제거하는 여러 방법을 발견하고, 마지막으로 하나의 코드 스니펫에서 옵션을 삭제, 추가 및 선택하는 방법을 배웁니다.
<select> 태그의 옵션 추가
일반적으로 JavaScript를 사용하지 않고 <select> 태그의 옵션을 추가하지만 때때로 jQuery 또는 JS를 사용하여 웹 페이지의 드롭다운 메뉴에 옵션을 추가해야 할 수도 있습니다. 옵션을 추가하는 데 도움이 되는 몇 가지 방법에 대해 논의할 것입니다.
JavaScript를 사용하여 옵션 추가
JavaScript를 사용하여 옵션을 추가하는 것으로 시작하겠습니다. JavaScript의 사용 용이성 덕분에 우리는 웹 페이지의 요소를 가지고 놀 수 있는 많은 유연성을 가지고 있습니다.
아래 코드에서 <option>을 추가하기 위한 요구 사항을 확인하십시오.
<html>
<head>
<script>
window.onload = function(){
var length = document.getElementById("drop_down").options.length;
drop_down.options[length] = new Option ("Text4");
}
</script>
</head>
<body>
<select id="drop_down" style="width:100px">
<option>Text1</option>
<option>Text2</option>
<option>Text3</option>
</select>
</body>
</html>
출력:
<select> 태그에 세 가지 옵션이 포함되어 있으므로 길이 변수는 3으로 설정됩니다. 인덱스를 사용하여 모든 태그를 찾을 수 있습니다.
<select> 태그의 옵션에 대해 이야기할 때 첫 번째 옵션은 인덱스 0에 있고 두 번째 옵션은 인덱스 1에 있습니다.
코드와 같이 options 배열의 전체 길이를 결정한 다음 마지막 항목에 인접한 인덱스에 새 옵션을 생성하여 새 옵션을 추가할 수 있습니다.
.append() 메서드를 사용하여 옵션 추가
기존 <select> 태그에 옵션을 추가하는 데 사용할 수 있는 다음 기술은 jQuery의 .append() 메서드입니다. append() 메서드는 선택한 요소의 끝에 콘텐츠를 추가합니다.
매개변수에 텍스트와 HTML 요소를 전달할 수 있습니다. .append() 메소드의 작동을 이해하려면 아래 코드와 출력을 확인하십시오.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#drop_down").append('<option>Text4</option>')
});
</script>
</head>
<body>
<select id="drop_down" style="width:100px">
<option>Text1</option>
<option>Text2</option>
<option>Text3</option>
</select>
</body>
</html>
출력:
append() 함수는 출력에서 볼 수 있듯이 마지막에 옵션을 추가합니다. .prepend() 함수를 사용하여 처음에 옵션을 추가할 수 있습니다.
시작 또는 끝 이외의 위치에 옵션을 추가할 수도 있습니다. 특정 옵션 뒤에 옵션을 삽입하려면 after() 메서드를 사용할 수 있고, 선택한 옵션 앞에 옵션을 추가하려면 .before() 메서드를 사용할 수 있습니다.
<select> 태그의 옵션 제거
JavaScript 및 jQuery를 사용하여 드롭다운 목록의 옵션을 제거할 수 있습니다. <select> 태그의 옵션을 제거하는 데 도움이 되는 다양한 접근 방식에 대해 논의해 보겠습니다.
.find() 및 .remove() 메서드를 사용하여 <select> 태그의 옵션 제거
선택 태그의 옵션을 제거하기 위해 논의할 첫 번째 방법은 jQuery의 .find() 및 .remove() 메소드를 사용하는 것입니다.
.find(): 이 메서드는 요소의 자손 요소를 검색합니다. 자녀, 손자, 증손자 등은 모두 후손으로 간주됩니다. 다른 트리 순회 기술과 달리 find() 함수에는 필터 매개변수가 필요합니다.
.remove(): 이 jQuery 메서드를 사용하여 선택한 요소와 그 하위 요소를 제거합니다.
아래 코드에서 이 두 함수의 작동을 살펴보겠습니다.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#drop_down').find('option').remove();
});
</script>
</head>
<body>
<select id="drop_down" style="width:100px">
<option>Text1</option>
<option>Text2</option>
<option>Text3</option>
</select>
</body>
</html>
출력:
이전에 말했듯이 find() 메서드에는 필터 매개 변수가 필요하므로 option을 필터로 지정하여 선택 요소에서 모든 옵션 태그를 검색하도록 했습니다. 그런 다음 출력에서 볼 수 있듯이 얻은 모든 옵션 태그를 제거하는 remove 메서드를 호출했습니다.
모두 제거하지 않고 선택 태그에서 특정 옵션 하나만 제거할 수도 있습니다. 단순히 옵션의 인덱스를 지정하여 제거할 수 있습니다.
예를 들어 두 번째 옵션을 제거하려면 인덱스 1에 있어야 합니다. 단순히 $('#drop down').find('option')[1].remove()를 입력하면 됩니다. 삭제하십시오.
.children() 및 .remove() 메서드를 사용하여 <select> 태그의 옵션 제거
<select> 태그의 모든 옵션을 제거하는 데 사용할 수 있는 또 다른 방법은 .children() 및 .remove() 메서드를 사용하는 것입니다. .remove() 메서드는 선택한 모든 요소를 제거하고 .children() 메서드는 선택한 요소의 모든 직계 자식을 반환합니다.
이러한 방법의 작동을 이해하려면 아래 코드를 관찰하십시오.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#drop_down').children().remove();
});
</script>
</head>
<body>
<select id="drop_down" style="width:100px">
<option>Text1</option>
<option>Text2</option>
<option>Text3</option>
</select>
</body>
</html>
출력:
.empty() 메서드를 사용하여 <select> 태그의 옵션 제거
여러 방법을 사용하여 옵션을 제거하지 않으려면 걱정하지 마십시오. jQuery가 당신을 덮었습니다. jQuery에는 선택한 요소의 모든 자식 요소를 제거하는 .empty() 메서드가 있습니다. 이 메서드는 요소 자체를 제거하지 않습니다.
이해를 위해 코드와 그 결과를 살펴보십시오.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#drop_down').empty();
});
</script>
</head>
<body>
<select id="drop_down" style="width:100px">
<option>Text1</option>
<option>Text2</option>
<option>Text3</option>
</select>
</body>
</html>
출력:
드롭다운은 여전히 있지만 출력에 표시된 것처럼 옵션이 없습니다.
.options 메서드를 사용하여 <select> 태그의 옵션 제거
옵션을 제거하는 또 다른 유용한 방법은 JavaScript의 .options 기능을 사용하는 것입니다. 이것은 모든 옵션을 지우는 일반적인 방법입니다.
.options 메서드는 드롭다운 목록의 모든 옵션을 반환합니다. 우리가 해야 할 일은 options.length 를 0으로 설정하는 것입니다.
length 메서드는 특정 요소에 포함된 요소의 수를 알려줍니다. 0으로 설정하면 선택한 요소 안에 요소가 없음을 나타냅니다. 놀랍죠?
더 나은 이해를 위해 코드를 살펴보십시오.
<html>
<head>
<script>
window.onload = function(){
document.getElementById("drop_down").options.length=0;
}
</script>
</head>
<body>
<select id="drop_down" style="width:100px">
<option>Text1</option>
<option>Text2</option>
<option>Text3</option>
</select>
</body>
</html>
출력:
jQuery를 사용하여 선택 상자의 옵션 제거, 추가 및 선택
지금까지 jQuery를 활용하여 선택 태그에서 옵션을 추가하고 제거하는 방법과 전략을 다루었습니다. 기사의 주요 목표에 가까워지면 단일 코드에서 추가, 제거 및 선택 작업을 결합하는 방법을 살펴보겠습니다.
이 기능을 구현하는 방법에는 여러 가지가 있습니다. 이해를 돕기 위해 각 기술을 자세히 살펴보겠습니다. 의 시작하자.
.remove() 및 .append() 메서드를 사용하여 옵션을 제거, 추가 및 선택합니다.
이제 .remove() 및 .append() jQuery 메서드에 상당히 익숙해졌다고 생각합니다. .remove()를 사용하여 선택한 요소의 모든 옵션 태그를 제거한 다음 .append()를 사용하여 새 옵션을 추가합니다.
이해하려면 아래 코드를 확인하십시오.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#drop_down')
.find('option')
.remove()
.end()
.append('<option value="4">Text4</option>')
.val('4');
});
</script>
</head>
<body>
<select id="drop_down" style="width:100px">
<option value="1">Text1</option>
<option value="2">Text2</option>
<option value="3">Text3</option>
</select>
</body>
</html>
출력:
.end() 메소드가 있는 이유와 기능에 대해 혼란스러울 수 있습니다. 현재 체인에서 가장 최근의 필터링 작업은 jQuery의 .end() 메서드를 사용하여 종료됩니다.
체이닝에 jQuery를 사용하는 경우 .end() 메서드가 유용합니다.
마지막으로 .val() 메서드를 적용하여 선택한 요소의 값을 설정했습니다. 추가한 옵션을 선택하고 싶었기 때문에 이것을 사용했습니다.
.empty() 및 .append() 메소드를 사용하여 옵션을 제거, 추가 및 선택하십시오.
드롭다운 목록의 모든 옵션을 제거하기 위해 논의한 또 다른 접근 방식은 .empty() 메서드로 모든 옵션을 제거한 다음 .append()를 사용하여 새 옵션을 추가합니다. 아래 코드를 확인하십시오.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#drop_down').empty().append('<option selected="selected">Text4</option>');
});
</script>
</head>
<body>
<select id="drop_down" style="width:100px">
<option>Text1</option>
<option>Text2</option>
<option>Text3</option>
</select>
</body>
</html>
출력:
JavaScript를 사용하여 옵션 제거, 추가 및 선택
필요한 기능을 위해 JavaScript를 사용할 수 있습니다. 위의 섹션에서 JavaScript를 사용하여 옵션을 추가하고 제거하는 방법에 대해 자세히 설명했습니다.
더 나은 이해를 위해 아래 코드를 살펴보십시오.
<html>
<헤드>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<스크립트>
$(문서).ready(함수(){
var mySelect = document.getElementById('drop_down');
mySelect.options.length = 0;
mySelect.options[0] = 새 옵션("텍스트4");
mySelect.options[0].selected="true";
});
</스크립트>
</헤드>
<몸>
<select id="drop_down" 스타일="너비:100px">
<옵션>텍스트1</옵션>
<옵션>텍스트2</옵션>
<옵션>텍스트3</옵션>
</선택>
</body>
</html>
출력:
.html() 메서드를 사용하여 콘텐츠 바꾸기
<select> 태그의 전체 내용을 새 필수 옵션으로 교체하면 <select> 태그에서 모든 옵션을 제거하고 새 옵션을 추가한 다음 jQuery를 사용하여 선택할 수 있습니다. 이를 위해 .html() 메서드를 사용합니다.
.html() 메서드는 지정된 요소의 콘텐츠를 설정하거나 반환합니다. 콘텐츠를 검색하는 데 사용되는 경우 이 함수는 첫 번째로 일치하는 요소의 콘텐츠를 반환하고 콘텐츠를 설정하는 데 사용되는 경우 이 기술은 일치하는 모든 요소의 콘텐츠를 덮어씁니다.
이 방법의 작동 방식을 살펴보겠습니다.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#drop_down").html("<option selected=\"selected\">Text4</option>")
});
</script>
</head>
<body>
<select id="drop_down" style="width:100px">
<option>Text1</option>
<option>Text2</option>
<option>Text3</option>
</select>
</body>
</html>
출력:
콘텐츠는 출력에서 볼 수 있듯이 .html() 메서드에서 지정한 <select> 태그의 기존 콘텐츠를 완전히 대체합니다.
.replaceWith() 메서드를 사용하여 콘텐츠 바꾸기
jQuery .replaceWith() 메서드를 사용하면 선택한 요소를 지정된 콘텐츠로 바꿀 수 있습니다. 코드를 확인하여 콘텐츠를 교체하는 방법을 알아보세요.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#drop_down').replaceWith('<select id="drop_down"> <option selected="selected">Text4</option> </select>');
});
</script>
</head>
<body>
<select id="drop_down" style="width:100px">
<option>Text1</option>
<option>Text2</option>
<option>Text3</option>
</select>
</body>
</html>
출력: