카테고리 선택시 제목이 자동으로 들어가게 하고 싶습니다.
본문
안녕하세요.
매번 반복되는 작업을 단순화 하고 싶어서 스킨을 수정하고 싶은데 능력이 되지 않아 질문을 드려봅니다.
예를 들어 말씀을 드리자면
카테고리는 과일/육류/음료 가 있으며
과일을 선택하면 제목을 사과 / 배 / 딸기 중에 하나가 선택될 수 있게 하고 싶고
육류를 선택하면 제목을 소고기/돼지고기/닭 중에 하나가 선택될 수 있게 하고 싶습니다.
이렇게 하려면 어떻게 해야 할까요?
아예 감도 못잡겠어서 질문을 어떻게 해야할지도 모르겠습니다.
'만들어 주세요' 급의 질문을 드려서 죄송합니다.
힌트라도 좀 주실 고수님이 계셨으면 좋겠습니다.
감사합니다.
답변 3
1. 과일/육류/음료 <== 게시판 괸리 분류에 등록
2. 사과/배/딸기@소고기/돼지고기/닭@콜라/사이다/베지밀 <==게시판 관리 여분필드(bo_1)에 등록해서 사용하면 스킨 소스에 코드를 넣는 것보다 나중에 추가/삭제 등이 편리할 것입니다
3. write.skin.php 하단 자바스크립트에 추가
optionArr ="<?php echo $board['bo_1']?>".split('@');
4. <select name="ca_name" id="ca_name" required onchange="next_select(this.value)"> <==onchange추가
5. 두번째 select 추가
<select name='wr_1' id='wr_1'></select>
5. 하단 자바스크립트에 두번째 select 만들기 함수 추가
function next_select(val){
if(val=='') return;
여기에 val 값에 따라 wr_1 option 만들어 추가하기 코드
}
6. 위와 같이 하면 wr_1에 ca_name에 따라 달리 나온 두번째 select 값인 사과/ 소고기 등 값이 저장 됨
감사합니다. 거의 다 떠 먹여 주신 것 같은데.....도 불구하고 "여기에 val 값에 따라 wr_1 option 만들어 추가하기 코드" 를 어떻게 해야할지 몰라서 열심히 검색해 보고 있습니다.
꼭 성공해보겠습니다.
다시 한번 감사드립니다!
https://yamea-guide.tistory.com/entry/%EC%A0%9C%EC%9D%B4%EC%BF%BC%EB%A6%AC-%EB%8F%99%EC%A0%81%EC%9C%BC%EB%A1%9C-select-option-%EC%B6%94%EA%B0%80-%ED%95%98%EA%B8%B0empty%EC%99%80-append
여기 보면 비슷한게 있네요
bo_1에 사과/배/딸기
bo_2에 소고기/돼지고기/닭
~
이렇게 넣고
javascript
bo1="<?php echo $board['bo_1']?>".split('/');
bo2="<?php echo $board['bo_2']?>".split('/');
~~
if(val=='과일'){
bo1로 option 생성
}
<?php if ($is_category) { ?>
<tr>
<td class="thead">구분</td>
<td colspan="3">
<div class="bo_w_select">
<label for="ca_name" class="sound_only">구분<strong>필수</strong></label>
<select name="ca_name" id="ca_name" required onchange="updateSubCategory()">
<option value="">구분선택</option>
<?php echo $category_option ?>
</select>
</div>
</td>
</tr>
<?php } ?>
<tr>
<td class="thead">업체명</td>
<td>
<select name="wr_subject" id="wr_subject" required style="width:60%;">
<option value="">먼저 구분을 선택하세요</option>
</select>
</td>
</tr>
<script>
function updateSubCategory() {
var category = document.getElementById("ca_name").value;
console.log("선택된 카테고리:", category); // 선택된 값 확인
var subjects = {
"과일": ["사과", "배", "딸기"],
"육류": ["소고기", "돼지고기", "닭"],
"음료": ["커피", "주스", "탄산음료"]
};
var subjectSelect = document.getElementById("wr_subject");
// 기존 옵션 초기화
subjectSelect.innerHTML = "<option value=''>선택하세요</option>";
console.log("옵션 초기화 완료"); // 초기화 확인
if (subjects[category]) {
subjects[category].forEach(function(item) {
var option = document.createElement("option");
option.value = item;
option.textContent = item;
subjectSelect.appendChild(option);
console.log("추가된 옵션:", item); // 옵션 추가 확인
});
}
}
</script>
이렇게 해봤습니다.
이상하게 콘솔창에는 잘 표시가 되는데
선택된 카테고리: 과일
write.php?bo_table=test:373 옵션 초기화 완료
write.php?bo_table=test:381 추가된 옵션: 사과
write.php?bo_table=test:381 추가된 옵션: 배
write.php?bo_table=test:381 추가된 옵션: 딸기
막상 브라우져의 옵션값에는 아무것도 나오지 않습니다 ㅠㅠ
subjArr = [];
subjArr['과일']="사과/배/딸기";
subjArr['육류']="소고기/돼지고기/닭";
subjArr['음료']="커피/주스/탄산음료";
function updateSubCategory() {
caname = $("#ca_name").val();
$('#wr_subject').empty();
$('#wr_subject').append('<option value="">먼저 구분을 선택하세요</option>');
tmp = subjArr[caname].split('/');
$.each(tmp, function( idx, val){
$('#wr_subject').append('<option value="'+val+'">'+val+'</option>');
});
}
균이님께서 도와주시긴 했지만 결국 다른 형태로 해결했습니다.
<?php if ($is_category) { ?>
<tr>
<td class="thead">구분</td>
<td colspan="3">
<div class="bo_w_select">
<label for="ca_name" class="sound_only">구분<strong>필수</strong></label>
<select name="ca_name" id="ca_name" required onchange="updateSubCategory()">
<option value="">구분선택</option>
<?php echo $category_option ?>
</select>
</div>
</td>
</tr>
<?php } ?>
<tr>
<td class="thead">업체명</td>
<td>
<select name="wr_subject" id="wr_subject" required style="width:60%;">
<option value="">먼저 구분을 선택하세요</option>
</select>
</td>
</tr>
<script>
function updateSubCategory() {
var category = document.getElementById("ca_name").value;
console.log("선택된 카테고리:", category); // 선택된 값 확인
var subjects = {
"과일": ["사과", "배", "딸기"],
"육류": ["소고기", "돼지고기", "닭"],
"음료": ["커피", "주스", "탄산음료"]
};
var subjectSelect = document.getElementById("wr_subject");
// 기존 옵션 초기화
subjectSelect.innerHTML = "<option value=''>선택하세요</option>";
console.log("옵션 초기화 완료"); // 초기화 확인
if (subjects[category]) {
subjects[category].forEach(function(item) {
var option = document.createElement("option");
option.value = item;
option.textContent = item;
subjectSelect.appendChild(option);
console.log("추가된 옵션:", item); // 옵션 추가 확인
});
}
}
</script>
위 소스대로 하면 됩니다.
브라우져의 옵션값에는 아무것도 나오지 않았던 이유는 selectize.min.js 를 사용하고 있었기 때문이었습니다.
