이전 목록 다음

채택완료

3단 셀렉트박스 질문드리겠습니다 ㅠ

코딩초보1

2018-10-08 (월) 16:17:12 4,490

3단셀렉트 박스를 만들고있는데요 2단 3단도 안나오고 그러는데 왜그런걸까요 ㅠㅠ?

https://sir.kr/qa/216040?stx=%EC%85%80%EB%A0%89%ED%8A%B8&sst=wr_num&page=4&unanswered=0&s_tag=%EA%B7%B8%EB%88%84%EB%B3%B4%EB%93%9C5

여기 원본소스입니다

Copy

<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>

그누보드5

답변 3개 / 댓글 9개

채택된 답변

+20 포인트

하이바네

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2018-10-08 (월) 16:37:52

코드 한번 확인해보세요.

올려주신거 복사해서 넣어봤었는데 jquery적힌 쪽에 제대로 닫히지 않은 부분이 있더군요.

밑에 제가 붙여놓은거 써보시면 잘 동작할꺼에요.

Copy

<!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>

답변에 대한 댓글 3개

코딩초보1

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2018-10-08 (월) 16:45:55

이상하게
kt 에서는 3단까지 되는데
sk나 lg에서는 3단까지 안가는데 뭘추가해야할까요

하이바네

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2018-10-08 (월) 16:55:43

KT를 제외한 SK, LG에는 option value 값들이 빠져있네요. 이것들 추가해주세요~~~
[code]
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>');
}
[/code]

코딩초보1

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2018-10-08 (월) 17:01:46

&wr_1=SK&wr_1=애플&wr_1=갤럭시노트9+512G. 주소가 이렇게 찍히는데요

&wr_1=SK애플갤럭시노트9+512G. 이렇게 찍히게 할려면 어떻게 해야할까요 ?

name="" 네임을 이렇게 아예 없애면 아래 주소처럼 나오더라구요
bo_table=auction&wr_1=KT

하이바네

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2018-10-08 (월) 17:15:22

소스가 좀 바뀌어야해서...이걸로 확인해보세요 input에 name들 변경하고 hidden인 input추가,

$("select[data-id=c]").change(function(){} 추가 하였습니다. select box만들어질때 쓰인 값들도 좀 잘못되서 수정했구요

Copy

<!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>

답변에 대한 댓글 6개

하이바네

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2018-10-08 (월) 17:36:32

<input type='hidden' name='wr_1' val=''>

이거는 추가하셨나요? form 안에 넣어주시면되요

코딩초보1

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2018-10-08 (월) 17:38:24

<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일정도 문제해결을 못해서요

하이바네

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2018-10-08 (월) 17:41:05

<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은 그누보드에서 어떤 테이블인지 알려주는 변수로 쓰이는거라 비워두면 안되요

코딩초보1

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2018-10-08 (월) 17:51:47

/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=''>
이렇게 할시에는 주소가 이렇게 나옵니다 ㅠ

하이바네

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2018-10-08 (월) 18:07:00

이렇게만 바꿔주셔도 될거 같은데;;;
[code]
$("input[name=wr_1]").val($("select[data-id=a]").val()+$("select[data-id=b]").val()+$("select[data-id=c]").val());
});

[/code]

코딩초보1

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2018-10-08 (월) 18:16:52

전체소스좀 보여주실 수 있나요?
다따라해봤는데 비교가 필요할듯합니다 ㅠ

onlymilk47

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2018-10-08 (월) 16:38:36

적으신 글의 68라인뒤에 }); 를 추가해 보세요

temp.append('<option value="">기타</option>');

}

});//---> 이부분 추가

$("select[data-id=b]").change(function() { var temp = $("select[data-id=c]");

답변을 작성하려면 로그인이 필요합니다.

3단 셀렉트박스 질문드리겠습니다 ㅠ

답변 3개 / 댓글 9개

답변에 대한 댓글 3개

답변에 대한 댓글 6개

공유하기