style24.front/src/main/webapp/WEB-INF/views/web/mypage/ChangeOptionPopupFormWeb.html

<!-- 배송지변경 팝업 -->
<div class="modal-header">
	<h5 class="modal-title" id="exchangeLabel">교환 옵션 변경</h5>
</div>
<div class="modal-body">
	<div class="pop_cont">
		<form class="form_wrap">
			<div class="modify_option_area" id="modifyOptionArea">
				<th:block th:if="${exchangeOptionInfo}" th:each="oneData, status : ${exchangeOptionInfo}">
					<div class="modify_box" th:attr="ordDtlItemSq=${oneData.ordDtlItemSq}, num=${num}">
						<div class="name_blk" th:if="${oneData.goodsType == 'G056_S'}" th:text="|${oneData.itemNm} / ${oneData.colorNm} / ${oneData.optCd2}|"></div>
						<div class="name_blk" th:unless="${oneData.goodsType == 'G056_S'}" th:text="|${oneData.colorNm} / ${oneData.optCd2}|"></div>
						<div class="select_blk">
							<!-- 옵션교환 라디오 형태 -->
							<div class="sel_radio" th:if="${oneData.selfGoodsYn == 'Y'}">
								<input type="hidden" name="chgOptCd2" th:attr="ordDtlItemSq=${oneData.ordDtlItemSq}, itemNm=${oneData.itemNm}, colorNm=${oneData.colorNm}, orgOptCd2=${oneData.optCd2}, goodsType=${oneData.goodsType}" th:value="${oneData.optCd2}">
								<div th:class="|form_field ${oneData.ordDtlItemSq}|">
									<div th:if="${oneData.optCd2Arr.length > 0}" th:each="option, idx : ${oneData.optCd2Arr}">
										<input type="radio" th:name="${oneData.ordDtlItemSq}" th:id="|${oneData.ordDtlItemSq}_${option}|" th:value="${option}" th:disabled="${#numbers.formatInteger(oneData.currStockQtyArr[idx.index], 0)} <= 0 or ${oneData.soldoutYnArr[idx.index] == 'Y'}" th:checked="${option == oneData.optCd2}" onclick="fnRadioOption(this);">
										<label th:for="|${oneData.ordDtlItemSq}_${option}|"><span th:text="${option}"></span></label>
									</div>
								</div>
							</div>
							<!-- //옵션교환 라디오 형태 -->
							<!-- 옵션교환 셀렉트박스 형태 -->
							<div class="sel_select" th:unless="${oneData.selfGoodsYn == 'Y'}">
								<div class="form_field">
									<div class="select_custom exchange_option">
										<div class="combo">
											<input type="hidden" name="chgOptCd2" th:attr="ordDtlItemSq=${oneData.ordDtlItemSq}, itemNm=${oneData.itemNm}, colorNm=${oneData.colorNm}, orgOptCd2=${oneData.optCd2}, goodsType=${oneData.goodsType}" th:value="${oneData.optCd2}">
											<div class="select" th:text="${oneData.optCd2}"></div>
											<ul class="list">
												<!-- 선택처리 class="selected" / 선택불가 aria-disabled="true" / 품절표기 data-soldout="true" 추가  -->
<!--												<li class="selected" th:attr="ordDtlItemSq=${oneData.ordDtlItemSq}, optCd2=''" onclick="fnSelectOption(this);">옵션 선택</li>-->
												<th:block th:each="option, idx : ${oneData.optCd2Arr}">
													<li th:if="${oneData.optCd2Arr.length} > 0 and (${#numbers.formatInteger(oneData.currStockQtyArr[idx.index],0)} <= 0 or ${oneData.soldoutYnArr[idx.index]} == 'Y')" th:classappend="${option == oneData.optCd2} ? 'selected'" th:text="${option}" aria-disabled="true" data-soldout="true" th:attr="optCd2=''" onclick="fnSelectOption(this);"></li>
													<li th:if="${oneData.optCd2Arr.length} > 0 and ${#numbers.formatInteger(oneData.currStockQtyArr[idx.index],0)} > 0 and ${oneData.soldoutYnArr[idx.index]} == 'N'" th:classappend="${option == oneData.optCd2} ? 'selected'" th:text="${option}" th:attr="optCd2=${option}" onclick="fnSelectOption(this);"></li>
												</th:block>
											</ul>
										</div>
									</div>
								</div>
							</div>
							<!-- //옵션교환 셀렉트박스 형태 -->
						</div>
					</div>
				</th:block>
			</div>
		</form>
	</div>
</div>
<div class="modal-footer">
	<button type="button" id="" class="btn btn_dark" onclick="fnSaveOption();"><span>옵션 저장</span></button>
</div>
<script th:inline="javascript">
	let oneData = [[${oneData}]];
	let chgQty = [[${chgQty}]];

	$(document).ready( function() {
		// 셀렉트박스 활성화
		$('#exchangePop .select_custom.exchange_option').each(function() {
			new sCombo($(this));
		});
	});

	// 라디오 클릭 이벤트
	var fnRadioOption = function(param) {
		$(param).parent().parent().parent().find('input[name=chgOptCd2]').val($(param).val());
	}

	// 셀렉트박스 클릭 이벤트
	var fnSelectOption = function(param) {
		$(param).parent().parent().find('input[name=chgOptCd2]').val($(param).attr('optCd2'));
	}
	
	// 옵션 저장 버튼 클릭 이벤트
	var fnSaveOption = function() {
		// 변경 옵션 처리
		let dataArr = [];

		$.each($('input[name=chgOptCd2]'), function(idx, item) {
			let ordDtlItemSq = $(item).attr('ordDtlItemSq');
			let colorNm = $(item).attr('colorNm');
			let itemNm = $(item).attr('itemNm');
			let goodsType = $(item).attr('goodsType');
			let chgOptCd2 = $(item).val();

			let data = {};
			data.ordDtlNo = oneData.ordDtlNo;
			data.ordDtlItemSq = ordDtlItemSq;
			data.chgQty = chgQty;
			data.colorNm = colorNm;
			data.itemNm = itemNm;
			data.goodsType = goodsType;
			data.chgOptCd2 = chgOptCd2;
			dataArr.push(data);
		});
console.log(dataArr);
		fnChangeOptionCallback(dataArr)

		$('.close-modal').trigger('click');
	}
</script>