$(document).on('change', <select>, function() {...}
2023. 9. 24. 14:15ㆍJavascript
 |
 |
 |
호랑이 담배 먹던 시절에 java Swing 으로 UX 만들 때도 이벤트 리스너를 지우고 선택상자를 초기화한 후에 다시 이벤트 걸고... 많이 했던 짓인데, SI 에서 촉박한 시간에 개발하려다가 이벤트 꼬이고 짱구는 안돌아가고 아휴!!
그래서 재현해봤다. spring, ajax 다 빼고 단순히 HTML + js 로. 이게 핵심이니까. (jquery 는 넣었다.)
이게 어떤 상황이냐면, 그리드의 특정 ROW 를 더블클릭했을 때 해당 데이터를 수정하기 위한 다이얼로그를 띄울 때 기존 설정값이 SELECT 박스에서 선택되도록 하는 부분이다.
<HTML lang=en>
<HEAD>
<SCRIPT SRC=".\jquery-3.7.1.min.js"></SCRIPT>
</HEAD>
<BODY>
<DIV></DIV>
<select id="place">
</select>
<select id="tgtItmId">
</select>
<SCRIPT>
$(function(){// 'change' 이벤트를 걸기 전에 선처리함.
fillPlace_and_set_defaultVal(); // place 목록 채우기
fillTgtItm_placeVal('pla002'); // tgtItmId 목록 채우기
// 앞서 채운 tgtItmId 목록에서 itm003 를 값으로 가진 옵션이 선택되도록 한다
$("#tgtItmId").val("itm003").attr("selected", "selected");
});
/**
* 그리고 이벤트 걸기.
* 위의 $(function()) 에서 두 SELECT 를 미리 선택되도록 했기 때문에.
*/
$(document).on('change', '#place', function(){// add event listener
fillTgtItm_placeVal( $('#place').val() );
});
/*
* 1번 SELECT 박스를 채울 때 두 번째 옵션을 기본선택되도록 selected 속성을 추가하고
*/
function fillPlace_and_set_defaultVal() {
$("#place").empty();
let htmlString = '<OPTION VALUE="">선택하세요</OPTION>';
htmlString += '<OPTION VALUE="pla001">집</OPTION>'
+ '<OPTION VALUE="pla002" selected>학교</OPTION>'
+ '<OPTION VALUE="pla003">회사</OPTION>';
$("#place").append(htmlString);
}
/*
* 1번에서 설정한 두 번째 옵션인 'pla002 / 학교' 값으로 TgtItm SELECT 박스의 목록을 정해서 채운다
*/
function fillTgtItm_placeVal(placeVal) {// 미리 설정
if (!placeVal);// 없으면 실행안되게
$("#tgtItmId").empty();
let htmlString = "";
switch (placeVal) {
case "pla001":
htmlString = '<OPTION VALUE="">선택하세요</OPTION>';
htmlString += '<OPTION VALUE="itm001">청소</OPTION>'
+ '<OPTION VALUE="itm002">TV시청</OPTION>'
+ '<OPTION VALUE="itm003">토끼 밥주기</OPTION>';
$("#tgtItmId").append(htmlString);
break;
case "pla002":
htmlString = '<OPTION VALUE="">선택하세요</OPTION>';
htmlString += '<OPTION VALUE="itm001">공부하기</OPTION>'
+ '<OPTION VALUE="itm002">운동하기</OPTION>'
+ '<OPTION VALUE="itm003">놀기</OPTION>';
$("#tgtItmId").append(htmlString);
break;
case "pla003":
htmlString = '<OPTION VALUE="">선택하세요</OPTION>';
htmlString += '<OPTION VALUE="itm001">일하기</OPTION>'
+ '<OPTION VALUE="itm002">식사하기</OPTION>'
+ '<OPTION VALUE="itm003">퇴근하기</OPTION>';
$("#tgtItmId").append(htmlString);
break;
}
}
</SCRIPT>
</BODY>
</HTML>'Javascript' 카테고리의 다른 글
| [JQuery] selector 한꺼번에 지정하기 (0) | 2023.11.20 |
|---|---|
| JS 에서 소수점 반올림 처리하기 (0) | 2023.11.20 |
| 그리드 - Tabulator 엑셀 형식으로 다운로드하기 (0) | 2023.11.03 |
| 주 번호로 해당 주의 시작일 ~ 종료일 범위 구하기 (0) | 2023.09.17 |
| [자바스크립트, HTML] 이미지 파일 미리보기 (0) | 2023.05.06 |