저는 프론트 엔드 개발에 종사하는 기술자입니다. 드롭 다운 상자는 우리가 더 많이 사용하는 페이지 요소입니다. 오늘은 실제 작업에서 발생하는 문제에 따라 드롭 다운 박스 등록 이벤트의 몇 가지 예에 대해 이야기하겠습니다. 모든 사람에게 도움이되기를 바랍니다.
코드 사본은 다음과 같습니다.
<select name = ""id = "sel">
<옵션 값 = "111"> 1 </옵션>
<옵션 값 = "222"> 2 </옵션>
<옵션 값 = "333"> 3 </옵션>
</선택>
위는 매우 간단한 단일 선택 드롭 다운 박스 코드입니다. 드롭 다운 옵션을 클릭하여 해당 값을 얻으려면 일반 코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
var sel = document.getElementById ( "sel");
var 옵션 = sel.options;
for (var i = 0; i <옵션 .length; i ++) {
옵션 [i] .onclick = function () {
alert (this.text); // 드롭 다운 옵션의 텍스트 값을 가져옵니다
Alert (this.value); // 드롭 다운 옵션의 값을 얻습니다
}
}
위의 코드는 IE9와 Chrome 아래의 예상 효과를 생성 할 수 없으며 Firefox에 효과적입니다. 이 경우 옵션 옵션에서 클릭 이벤트를 바인딩하는 것이 좋습니다. 변화가 일반적이며 본질적으로 변화이기 때문에 대신 변경 이벤트를 사용하는 것이 좋습니다.
코드 사본은 다음과 같습니다.
var sel = document.getElementById ( "sel");
sel.onchange = function () {
Alert (sel.options [sel.selectedIndex] .Value);
}
위의 것은이 기사에 관한 모든 것입니다. 나는 당신이 그것을 좋아하기를 바랍니다.