평범한 연구소

[jQuery] 모달창 내부 select에서 선택된 option 값 가져오기 본문

Pront/jQuery

[jQuery] 모달창 내부 select에서 선택된 option 값 가져오기

soyeonisgood 2022. 10. 25. 21:15
<!-- 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}&nbsp;${vo.name_apper}&nbsp;${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("");
    	}
	});