드롭다운 목록(<select>)이 포함된 폼의 ID를 확인하고 싶다면, JavaScript에서 제공하는 id 속성을 사용하면 됩니다.
핵심 개념
<select> 요소는 자신이 속한 폼을 가리키는 form 속성을 기본적으로 지원합니다. 따라서 select요소.form.id와 같이 작성하면, 해당 드롭다운 목록이 속해 있는 폼의 ID 값을 간단하게 얻을 수 있습니다.
예제 코드
아래 코드를 실행하면 드롭다운 목록이 포함된 폼의 ID가 화면에 출력됩니다.
<!DOCTYPE html>
<html>
<body>
<form id="myForm1">
<button id="btn" type="button" value="my_button">Demo</button>
</form><br>
<form id="myForm2">
<select id="mySelect">
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
</form>
<script>
var val = document.getElementById("mySelect").form.id;
document.write("<br>Form id with dropdown: "+val);
</script>
</body>
</html>코드 설명
위 예제에는 두 개의 폼이 존재합니다. 첫 번째 폼(myForm1)은 버튼만 포함하고 있고, 두 번째 폼(myForm2)은 드롭다운 목록을 포함하고 있습니다.
스크립트 부분에서 document.getElementById("mySelect")를 통해 ID가 mySelect인 드롭다운 요소를 가져온 뒤, .form.id를 사용하여 해당 요소가 속한 폼의 ID를 추출합니다. 결과적으로 "Form id with dropdown: myForm2"라는 문구가 화면에 출력됩니다.
이 방법은 폼 내부의 입력 요소에서 역으로 상위 폼 정보를 참조해야 할 때 매우 유용하게 활용할 수 있습니다.