3단 셀렉트박스 질문드리겠습니다 ㅠ
본문
3단셀렉트 박스를 만들고있는데요 2단 3단도 안나오고 그러는데 왜그런걸까요 ㅠㅠ?
여기 원본소스입니다
<tr>
<th rowspan="4" scope="row" style="padding-top: 10px;"></th>
<td>
<select data-id="a" name="wr_1" style="width:100%;">
<option value="">통신사를 선택해주세요.</option>
<option value="KT">KT</option>
<option value="SK">SK</option>
<option value="LG">LG</option>
</select>
<select data-id="b" name="wr_1" style="width:100%;">
<option value="">제조사를 선택해주세요.</option>
</select>
<select data-id="c"name="wr_1" style="width:100%;">
<option value="">휴대폰를 선택해주세요.</option>
</select>
<td>
</tr>
</div>
<input type="submit" value="검색하기" class="search_bt">
</form>
</div>
</div>
<style>
input, button {
margin: 0;
padding: 0;
font-size: 1em;
width: 15px;
height: 20px;
}
</style>
<script type="text/javascript">
$(function() {
$("select[data-id=a]").change(function() {
var temp = $("select[data-id=b]");
var a = $(this).val();
temp.children().remove();
temp.append('<option value="">선택하세요</option>');
if(a == 'KT'){
temp.append('<option value="삼성전자">삼성전자</option>');
temp.append('<option value="애플">애플</option>');
temp.append('<option value="LG">LG</option>');
temp.append('<option value="">기타</option>');
}
if(a == 'SK'){
temp.append('<option value="">삼성전자</option>');
temp.append('<option value="">애플</option>');
temp.append('<option value="">LG</option>');
temp.append('<option value="">기타</option>');
}
if(a == 'LG'){
temp.append('<option value="">삼성전자</option>');
temp.append('<option value="">애플</option>');
temp.append('<option value="">LG</option>');
temp.append('<option value="">기타</option>');
}
$("select[data-id=b]").change(function() {
var temp = $("select[data-id=c]");
var b = $(this).val();
temp.children().remove();
temp.append('<option value="">선택하세요</option>');
if(b == '삼성전자'){
temp.append('<option value="KT.삼성전자.갤럭시노트9 512G.">갤럭시노트9 512G</option>');
temp.append('<option value="KT.삼성전자.갤럭시노트9.">갤럭시노트9</option>');
temp.append('<option value="KT.삼성전자.갤럭시 S9 64GB.">갤럭시 S9 64GB</option>');
temp.append('<option value="KT.삼성전자.갤럭시 S9plus 64GB.">갤럭시 S9plus 64GB</option>');
}
if(b == '애플'){
temp.append('<option value="SK.삼성전자.갤럭시노트9 512G.">갤럭시노트9 512G</option>');
temp.append('<option value="SK.삼성전자.갤럭시노트9.">갤럭시노트9</option>');
temp.append('<option value="SK.삼성전자.갤럭시 S9 64GB.">갤럭시 S9 64GB</option>');
temp.append('<option value="SK.삼성전자.갤럭시 S9plus 64GB.">갤럭시 S9plus 64GB</option>');
}
if(b == 'LG'){
temp.append('<option value="KT.삼성전자.갤럭시노트9 512G.">갤럭시노트9 512G</option>');
temp.append('<option value="KT.삼성전자.갤럭시노트9.">갤럭시노트9</option>');
temp.append('<option value="KT.삼성전자.갤럭시 S9 64GB.">갤럭시 S9 64GB</option>');
temp.append('<option value="KT.삼성전자.갤럭시 S9plus 64GB.">갤럭시 S9plus 64GB</option>');
}
});
});
</script>
답변 3
코드 한번 확인해보세요.
올려주신거 복사해서 넣어봤었는데 jquery적힌 쪽에 제대로 닫히지 않은 부분이 있더군요.
밑에 제가 붙여놓은거 써보시면 잘 동작할꺼에요.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div>
<table>
<tr>
<th rowspan="4" scope="row" style="padding-top: 10px;"></th>
<td>
<select data-id="a" name="wr_1" style="width:100%;">
<option value="">통신사를 선택해주세요.</option>
<option value="KT">KT</option>
<option value="SK">SK</option>
<option value="LG">LG</option>
</select>
<select data-id="b" name="wr_1" style="width:100%;">
<option value="">제조사를 선택해주세요.</option>
</select>
<select data-id="c"name="wr_1" style="width:100%;">
<option value="">휴대폰를 선택해주세요.</option>
</select>
<td>
</tr>
</table>
</div>
<style>
input, button {
margin: 0;
padding: 0;
font-size: 1em;
width: 15px;
height: 20px;
}
</style>
<script type="text/javascript">
$(function() {
$("select[data-id=a]").change(function() {
var temp = $("select[data-id=b]");
var a = $(this).val();
temp.children().remove();
temp.append('<option value="">선택하세요</option>');
if(a == 'KT'){
temp.append('<option value="삼성전자">삼성전자</option>');
temp.append('<option value="애플">애플</option>');
temp.append('<option value="LG">LG</option>');
temp.append('<option value="">기타</option>');
}
if(a == 'SK'){
temp.append('<option value="">삼성전자</option>');
temp.append('<option value="">애플</option>');
temp.append('<option value="">LG</option>');
temp.append('<option value="">기타</option>');
}
if(a == 'LG'){
temp.append('<option value="">삼성전자</option>');
temp.append('<option value="">애플</option>');
temp.append('<option value="">LG</option>');
temp.append('<option value="">기타</option>');
}
});
$("select[data-id=b]").change(function() {
var temp = $("select[data-id=c]");
var b = $(this).val();
temp.children().remove();
temp.append('<option value="">선택하세요</option>');
if(b == '삼성전자'){
temp.append('<option value="KT.삼성전자.갤럭시노트9 512G.">갤럭시노트9 512G</option>');
temp.append('<option value="KT.삼성전자.갤럭시노트9.">갤럭시노트9</option>');
temp.append('<option value="KT.삼성전자.갤럭시 S9 64GB.">갤럭시 S9 64GB</option>');
temp.append('<option value="KT.삼성전자.갤럭시 S9plus 64GB.">갤럭시 S9plus 64GB</option>');
}
if(b == '애플'){
temp.append('<option value="SK.삼성전자.갤럭시노트9 512G.">갤럭시노트9 512G</option>');
temp.append('<option value="SK.삼성전자.갤럭시노트9.">갤럭시노트9</option>');
temp.append('<option value="SK.삼성전자.갤럭시 S9 64GB.">갤럭시 S9 64GB</option>');
temp.append('<option value="SK.삼성전자.갤럭시 S9plus 64GB.">갤럭시 S9plus 64GB</option>');
}
if(b == 'LG'){
temp.append('<option value="KT.삼성전자.갤럭시노트9 512G.">갤럭시노트9 512G</option>');
temp.append('<option value="KT.삼성전자.갤럭시노트9.">갤럭시노트9</option>');
temp.append('<option value="KT.삼성전자.갤럭시 S9 64GB.">갤럭시 S9 64GB</option>');
temp.append('<option value="KT.삼성전자.갤럭시 S9plus 64GB.">갤럭시 S9plus 64GB</option>');
}
});
});
</script>
</body>
</html>
이상하게
kt 에서는 3단까지 되는데
sk나 lg에서는 3단까지 안가는데 뭘추가해야할까요
KT를 제외한 SK, LG에는 option value 값들이 빠져있네요. 이것들 추가해주세요~~~
if(a == 'KT'){
temp.append('<option value="삼성전자">삼성전자</option>');
temp.append('<option value="애플">애플</option>');
temp.append('<option value="LG">LG</option>');
temp.append('<option value="">기타</option>');
}
if(a == 'SK'){
temp.append('<option value="">삼성전자</option>');
temp.append('<option value="">애플</option>');
temp.append('<option value="">LG</option>');
temp.append('<option value="">기타</option>');
}
if(a == 'LG'){
temp.append('<option value="">삼성전자</option>');
temp.append('<option value="">애플</option>');
temp.append('<option value="">LG</option>');
temp.append('<option value="">기타</option>');
}
&wr_1=SK&wr_1=애플&wr_1=갤럭시노트9+512G. 주소가 이렇게 찍히는데요
&wr_1=SK애플갤럭시노트9+512G. 이렇게 찍히게 할려면 어떻게 해야할까요 ?
name="" 네임을 이렇게 아예 없애면 아래 주소처럼 나오더라구요
bo_table=auction&wr_1=KT
적으신 글의 68라인뒤에 }); 를 추가해 보세요
temp.append('<option value="">기타</option>');
}
});//---> 이부분 추가
$("select[data-id=b]").change(function() { var temp = $("select[data-id=c]");
소스가 좀 바뀌어야해서...이걸로 확인해보세요 input에 name들 변경하고 hidden인 input추가,
$("select[data-id=c]").change(function(){} 추가 하였습니다. select box만들어질때 쓰인 값들도 좀 잘못되서 수정했구요
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div>
<input type='hidden' name='wr_1' val=''>
<table>
<tr>
<th rowspan="4" scope="row" style="padding-top: 10px;"></th>
<td>
<select data-id="a" name="sel1" style="width:100%;">
<option value="">통신사를 선택해주세요.</option>
<option value="KT">KT</option>
<option value="SK">SK</option>
<option value="LG">LG</option>
</select>
<select data-id="b" name="sel2" style="width:100%;">
<option value="">제조사를 선택해주세요.</option>
</select>
<select data-id="c"name="sel3" style="width:100%;">
<option value="">휴대폰를 선택해주세요.</option>
</select>
<td>
</tr>
</table>
</div>
<style>
input, button {
margin: 0;
padding: 0;
font-size: 1em;
width: 15px;
height: 20px;
}
</style>
<script type="text/javascript">
$(function() {
$("select[data-id=a]").change(function() {
var temp = $("select[data-id=b]");
var a = $(this).val();
temp.children().remove();
temp.append('<option value="">선택하세요</option>');
if(a == 'KT'){
temp.append('<option value="삼성전자">삼성전자</option>');
temp.append('<option value="애플">애플</option>');
temp.append('<option value="LG">LG</option>');
temp.append('<option value="">기타</option>');
}
if(a == 'SK'){
temp.append('<option value="삼성전자">삼성전자</option>');
temp.append('<option value="애플">애플</option>');
temp.append('<option value="LG">LG</option>');
temp.append('<option value="">기타</option>');
}
if(a == 'LG'){
temp.append('<option value="삼성전자">삼성전자</option>');
temp.append('<option value="애플">애플</option>');
temp.append('<option value="LG">LG</option>');
temp.append('<option value="">기타</option>');
}
});
$("select[data-id=b]").change(function() {
var temp = $("select[data-id=c]");
var b = $(this).val();
temp.children().remove();
temp.append('<option value="">선택하세요</option>');
if(b == '삼성전자'){
temp.append('<option value="갤럭시노트9 512G.">갤럭시노트9 512G</option>');
temp.append('<option value="갤럭시노트9">갤럭시노트9</option>');
temp.append('<option value="갤럭시 S9 64GB.">갤럭시 S9 64GB</option>');
temp.append('<option value="갤럭시 S9plus 64GB.">갤럭시 S9plus 64GB</option>');
}
if(b == '애플'){
temp.append('<option value="갤럭시노트9 512G.">갤럭시노트9 512G</option>');
temp.append('<option value="갤럭시노트9.">갤럭시노트9</option>');
temp.append('<option value="갤럭시 S9 64GB.">갤럭시 S9 64GB</option>');
temp.append('<option value="갤럭시 S9plus 64GB.">갤럭시 S9plus 64GB</option>');
}
if(b == 'LG'){
temp.append('<option value="갤럭시노트9 512G.">갤럭시노트9 512G</option>');
temp.append('<option value="갤럭시노트9.">갤럭시노트9</option>');
temp.append('<option value="갤럭시 S9 64GB.">갤럭시 S9 64GB</option>');
temp.append('<option value="갤럭시 S9plus 64GB.">갤럭시 S9plus 64GB</option>');
}
});
});
$("select[data-id=c]").change(function(){
$("input[name=wr_1]").val($("select[data-id=a]").val()+','+$("select[data-id=b]").val()+','+$("select[data-id=c]").val());
});
</script>
</body>
</html>
<input type='hidden' name='wr_1' val=''>
이거는 추가하셨나요? form 안에 넣어주시면되요
<form method="get" action="/bbs/board.php?bo_table=auction">
<input type="hidden" name="bo_table" value="" />
네이렇게 했는데 벨류값에 비워두면 존재하지 않는 게시판이라고 나오네요 ㅠㅠ
주소는 bbs/board.php?bo_table=auction&sel1=KT&sel2=삼성전자&sel3=갤럭시노트9+512G.
이렇게 동일하게 나옵니다
답변해주셔서 감사합니다 ㅠㅠ 이것때문에 3일정도 문제해결을 못해서요
<form method="get" action="/bbs/board.php?bo_table=auction">
<input type="hidden" name="bo_table" value="action" />
<input type='hidden' name='wr_1' val=''>
이렇게 넣으셔야죠~~bo_table은 그누보드에서 어떤 테이블인지 알려주는 변수로 쓰이는거라 비워두면 안되요
/bbs/board.php?bo_table=auction&sel1=KT&sel2=삼성전자&sel3=갤럭시노트9+512G.
<form method="get" action="/bbs/board.php?bo_table=auction">
<input type="hidden" name="bo_table" value="auction" />
이렇게 소스를 할시 주소가 이렇게 나옵니다
r/bbs/board.php?bo_table=auction&wr_1=KT%2C삼성전자%2C갤럭시노트9+512G.&sel1=KT&sel2=삼성전자&sel3=갤럭시노트9+512G.
<form method="get" action="/bbs/board.php?bo_table=auction">
<input type="hidden" name="bo_table" value="auction" />
<input type='hidden' name='wr_1' val=''>
이렇게 할시에는 주소가 이렇게 나옵니다 ㅠ
이렇게만 바꿔주셔도 될거 같은데;;;
$("input[name=wr_1]").val($("select[data-id=a]").val()+$("select[data-id=b]").val()+$("select[data-id=c]").val());
});
전체소스좀 보여주실 수 있나요?
다따라해봤는데 비교가 필요할듯합니다 ㅠ
답변을 작성하시기 전에 로그인 해주세요.
