Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
Tags
- 마리아DB 쿼리 로그
- 백준 11660번
- function test
- 생성자
- 자바 람다식
- 백준 1235번
- jquery
- Java
- 구간합
- pseudo-code
- 합배열
- @NoArgsConstructor
- this와 this() 차이
- map()
- SQL
- this
- 슈더코드
- select
- Bean LifecCycle
- 백준 11659번
- ajax
- MariaDB Query Log
- 상속과 참조
- @AllArgsConstructor
- interrupted()
- 구간합구하기
- 백준
- 2차원배열 구간합
- InterruptException
- json
Archives
- Today
- Total
평범한 연구소
[jQuery] 모달창 내부 select에서 선택된 option 값 가져오기 본문
<!-- empListModal: 사원검색의 사원리스트 모달 start -->
<div class="modal" id="empListModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">사원 검색</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>수신자 사원 리스트</p>
<div id="empList">
<select class="form-select searchEmpSelect" aria-label="Default select example" name="empSelectOption" data-posCode="${pos_code}">
<c:forEach var="vo" items="${list}" varStatus="loop">
<option value="${vo.id_apper}" data-name="${vo.name_apper}" >
${vo.dep_name} ${vo.name_apper} ${vo.pos_name}
</option>
</c:forEach>
</select>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" id="btnEmpSelect" data-bs-dismiss="modal">선택하기</button>
<button type="button" class="btn btn-primary" id="btnEmpDelete" data-bs-dismiss="modal">취소하기</button>
</div>
</div>
</div>
</div>
<!-- 사원검색 모달 end -->
// 수신자 검색 모달에서 select 된 사원 데이터 가져오기
$("body").on("click", "#btnEmpSelect", function() {
let $ele = $(this).closest(".modal-content").find("select");
let id_apper = $ele.val();
let name_apper = $ele.find("option:selected").attr("data-name");
let pos_code = $ele.attr("data-posCode");
// alert(id_apper+": "+name_apper+": "+pos_code);
if(pos_code === "3") {
$("#empId1").val(id_apper);
$("#empSearch1").val(name_apper);
} else if (pos_code === "4") {
$("#empId2").val(id_apper);
$("#empSearch2").val(name_apper);
} else if (pos_code === "5") {
$("#empId3").val(id_apper);
$("#empSearch3").val(name_apper);
} else if (pos_code === "6") {
$("#empId4").val(id_apper);
$("#empSearch4").val(name_apper);
}
});
// 수신자 검색 모달에서 select 된 사원 삭제
$("body").on("click", "#btnEmpDelete", function() {
let $ele = $(this).closest(".modal-content").find("select");
let pos_code = $ele.attr("data-posCode");
if(pos_code === "3") {
$("#empId1").val("");
$("#empSearch1").val("");
} else if (pos_code === "4") {
$("#empId2").val("");
$("#empSearch2").val("");
} else if (pos_code === "5") {
$("#empId3").val("");
$("#empSearch3").val("");
} else if (pos_code === "6") {
$("#empId4").val("");
$("#empSearch4").val("");
}
});
'Pront > jQuery' 카테고리의 다른 글
[jQuery] 형제 태그(div)의 내용(p) 가져오기 (0) | 2022.11.11 |
---|---|
[jQuery] table 선택된 행 데이터 가져오기 (0) | 2022.10.25 |
[jQuery] ajax (0) | 2022.10.22 |
[jQuery] 요소의 추가, 복사, 삭제, 대체 (append,wrap,clone,remove...) (0) | 2022.10.19 |
[jQuery] 선택자 (selector) (0) | 2022.10.19 |