인터넷 기술의 지속적인 발전으로 인해 동적 대화형 웹 페이지가 사용자들 사이에서 점점 더 인기를 얻고 있습니다. 드롭다운 상자는 스타일이 바뀌더라도 일반적으로 사용되는 양식 요소 중 하나입니다. , 실제 기능과 역할은 동일하게 유지됩니다. 이번 글에서는 자바스크립트로 드롭다운 양식을 작성하는 방법을 소개하겠습니다.
1. 기본 구조:
드롭다운 양식의 가장 기본적인 구조는
<select id="dropdown"> <option value="">请选择</option> <option value="1">选项一</option> <option value="2">选项二</option> <option value="3">选项三</option> <option value="4">选项四</option> </select>
2. 드롭다운 양식 구현:
1. DOM을 통해 드롭다운 양식 가져오기:
먼저 < JavaScript 문서 객체의 getElementById 메소드를 통해 얻을 수 있는 select> 이동:
var dropdown = document.getElementById("dropdown");2. 이벤트 수신을 통해 드롭다운 양식 구현:
다음으로 드롭다운 상자 기능을 구현해야 합니다. 사용자가 드롭다운 상자에서 옵션을 선택하면 이벤트에 응답하고 선택한 값을 가져와야 합니다.
dropdown.addEventListener("change", function() {
var value = dropdown.options[dropdown.selectedIndex].value;
console.log(value);
});3. 동적으로 옵션 추가:
때로는 동적으로 옵션을 추가해야 합니다. JavaScript에서는 createElement 및appendChild 메소드를 사용하여
var option = document.createElement("option");
option.text = "选项五";
option.value = "5";
dropdown.appendChild(option);3. 전체 코드:
<select id="dropdown">
<option value="">请选择</option>
<option value="1">选项一</option>
<option value="2">选项二</option>
<option value="3">选项三</option>
<option value="4">选项四</option>
</select>
<script>
var dropdown = document.getElementById("dropdown");
dropdown.addEventListener("change", function() {
var value = dropdown.options[dropdown.selectedIndex].value;
console.log(value);
});
var option = document.createElement("option");
option.text = "选项五";
option.value = "5";
dropdown.appendChild(option);
</script>4. 요약:
JavaScript에서 드롭다운 양식을 작성하는 것은 기본적인 프런트 엔드입니다. 개발 기술을 통해 복잡한 상호작용 효과를 달성하는 데 도움이 될 수 있으며 페이지의 상호작용성을 더욱 향상시킬 수도 있습니다. 이 기사를 공부하면서 JavaScript를 사용하여 드롭다운 양식을 작성하는 방법을 배웠다고 생각합니다.
위 내용은 자바스크립트를 사용하여 드롭다운 양식을 작성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
