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