드롭다운 메뉴로 선택된 값을 wr_subject로 넣기 채택완료
안녕하세요. 이런 드롭다운 메뉴를 만들어서 선택된 값을 게시글의 제목 (wr_subject)로 넣으려고 합니다.
(ex. 제품문의를 선택 후 글 쓰기 → 제목이 제품문의로 나옴)
select나 input을 사용해서 드롭다운 메뉴를 만든게 아니고 임의로 만든거라 자바스크립트로 값을 처리해야하는데 어떻게 해야할지 잘 모르겠습니다 ㅠㅠ
현상태에서는 게시글에 제목이 아예 나오지 않는 상태입니다. (당연히 리스트페이지에서도 제목이 안나옵니다..)
HTML
</p>
<p> <div></p>
<p> <p>문의사항</p></p>
<p> <label for="wr_subject" class="sound_only">문의사항<strong>필수</strong></label></p>
<p> <div class="select" title="문의사항"></p>
<p> <div class="selected"></p>
<p> <div class="selected-value">문의사항</div></p>
<p> <div class="arrow"></div></p>
<p> </div></p>
<p> <ul></p>
<p> <li class="option">제품 문의</li></p>
<p> <li class="option">견적 문의</li></p>
<p> <li class="option">기타</li></p>
<p> </ul></p>
<p> </div></p>
<p>
자바스크립트
</p>
<p>const selectBoxElements = document.querySelectorAll(".select");</p>
<p> </p>
<p>function toggleSelectBox(selectBox) {</p>
<p> selectBox.classList.toggle("active");</p>
<p>}</p>
<p> </p>
<p>function selectOption(optionElement) {</p>
<p> const selectBox = optionElement.closest(".select");</p>
<p> const selectedElement = selectBox.querySelector(".selected-value");</p>
<p> selectedElement.textContent = optionElement.textContent;</p>
<p> </p>
<p> $('input[name=wr_subject]').value(selectedElement);</p>
<p>}</p>
<p> </p>
<p>selectBoxElements.forEach(selectBoxElement => {</p>
<p> selectBoxElement.addEventListener("click", function (e) {</p>
<p> const targetElement = e.target;</p>
<p> const isOptionElement = targetElement.classList.contains("option");</p>
<p> </p>
<p> if (isOptionElement) {</p>
<p> selectOption(targetElement);</p>
<p> }</p>
<p> </p>
<p> toggleSelectBox(selectBoxElement);</p>
<p> });</p>
<p>});</p>
<p> </p>
<p>document.addEventListener("click", function (e) {</p>
<p> const targetElement = e.target;</p>
<p> const isSelect = targetElement.classList.contains("select") || targetElement.closest(".select");</p>
<p> </p>
<p> if (isSelect) {</p>
<p> return;</p>
<p> }</p>
<p> </p>
<p> const allSelectBoxElements = document.querySelectorAll(".select");</p>
<p> </p>
<p> allSelectBoxElements.forEach(boxElement => {</p>
<p> boxElement.classList.remove("active");</p>
<p> });</p>
<p>});</p>
<p>답변 5개
셀렉트 옵션 함수 처리 부분에 보면 value(selectedElement) 벨류는 속성이지 함수가 아닙니다. 잘못된것 같습니다.
또한 $ 함수를 사용하실려면 var wr_subject_value = $('input[name=wr_subject]').val(); 이렇게 메서드를 정의 하셔야합니다.
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
쉽게 쉽게 생각하시면
input hidden으로 wr_subject form 안에 넣어두시고
</p>
<p>$('.option').on('click',function(){</p>
<p> let chkVal = $(this).text();</p>
<p> $('input[name=wr_subject]').val(chkVal);</p>
<p>});</p>
<p>하면 될텐데요
댓글을 작성하려면 로그인이 필요합니다.
왜 번거롭게 쓰는지는 모르겠지만
$('input[name=wr_subject]').value(selectedElement);
이게 있는데 안들어간다는거봐서
input name이 wr_subject로된게 없다는거같은데요
input hidden 으로 해서 name = wr_subject 하나 넣어줘보세요
답변에 대한 댓글 3개
<div>
<p>문의사항</p>
<label for="wr_subject" class="sound_only">문의사항<strong>필수</strong></label>
<input type="hidden" name="wr_subject" value="<?php echo $selectedElement ?>" id="wr_subject" class="frm_input">
<div class="select" title="문의사항">
<div class="selected">
<div class="selected-value">문의사항</div>
<div class="arrow"></div>
</div>
<ul>
<li class="option">제품 문의</li>
<li class="option">견적 문의</li>
<li class="option">기타</li>
</ul>
</div>
[/code]
이렇게 해보시라는 말씀이실까요..??
일단그렇게 해보시고;
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
const selectBox = optionElement.closest(".select");
const selectedElement = selectBox.querySelector(".selected-value");
const selectedValue = optionElement.textContent;
const wrSubjectInput = selectBox.querySelector('input[name="wr_subject"]');
wrSubjectInput.value = selectedValue;
selectedElement.textContent = selectedValue;
}
이렇게 해보세요