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

코딩초보1 7년 전 조회 4,180

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

여기 원본소스입니다

</p>

<p>

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

<p>        </select>

    <td>

</tr>

 

 </p>

<p>    </div>

 

 

<input type="submit" value="검색하기" class="search_bt"></p>

<p></form></p>

<p> </div>

</div></p>

<p> </p>

<p>

<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>');

   }</p>

<p>$("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></p>

<p> </p>

<p> </p>

<p>

#그누보드5

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

답변 3개

정렬:

채택된 답변

+20 포인트

하이바네

7년 전

코드 한번 확인해보세요.

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

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

</p>

<p><!doctype html></p>

<p><html lang="ko"></p>

<p><head></p>

<p><meta charset="utf-8"></p>

<p><title>jQuery</title></p>

<p><script src="<a href="https://code.jquery.com/jquery-3.3.1.js"></script>" target="_blank" rel="noopener noreferrer">https://code.jquery.com/jquery-3.3.1.js"></script></a></p>

<p></head></p>

<p><body></p>

<p><div></p>

<p><table></p>

<p><tr></p>

<p><th rowspan="4" scope="row" style="padding-top: 10px;"></th></p>

<p><td></p>

<p><select data-id="a" name="wr_1" style="width:100%;"></p>

<p><option value="">통신사를 선택해주세요.</option></p>

<p><option value="KT">KT</option></p>

<p><option value="SK">SK</option></p>

<p><option value="LG">LG</option></p>

<p></select></p>

<p><select data-id="b" name="wr_1" style="width:100%;"></p>

<p><option value="">제조사를 선택해주세요.</option></p>

<p></select></p>

<p><select data-id="c"name="wr_1" style="width:100%;"></p>

<p><option value="">휴대폰를 선택해주세요.</option></p>

<p></select></p>

<p><td></p>

<p></tr></p>

<p></table></p>

<p></div></p>

<p><style></p>

<p>input, button {</p>

<p>margin: 0;</p>

<p>padding: 0;</p>

<p>font-size: 1em;</p>

<p>width: 15px;</p>

<p>height: 20px;</p>

<p>}</p>

<p></style></p>

<p><script type="text/javascript"></p>

<p>$(function() {</p>

<p>$("select[data-id=a]").change(function() {</p>

<p>var temp = $("select[data-id=b]");</p>

<p>var a = $(this).val();</p>

<p>temp.children().remove();</p>

<p>temp.append('<option value="">선택하세요</option>');</p>

<p> </p>

<p>if(a == 'KT'){</p>

<p>temp.append('<option value="삼성전자">삼성전자</option>');</p>

<p>temp.append('<option value="애플">애플</option>');</p>

<p>temp.append('<option value="LG">LG</option>');</p>

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

<p>}</p>

<p>if(a == 'SK'){</p>

<p>temp.append('<option value="">삼성전자</option>');</p>

<p>temp.append('<option value="">애플</option>');</p>

<p>temp.append('<option value="">LG</option>');</p>

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

<p>}</p>

<p>if(a == 'LG'){</p>

<p>temp.append('<option value="">삼성전자</option>');</p>

<p>temp.append('<option value="">애플</option>');</p>

<p>temp.append('<option value="">LG</option>');</p>

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

<p>}</p>

<p>});</p>

<p>

 </p>

<p>$("select[data-id=b]").change(function() {</p>

<p>var temp = $("select[data-id=c]");</p>

<p>var b = $(this).val();</p>

<p>temp.children().remove();</p>

<p>temp.append('<option value="">선택하세요</option>');</p>

<p>if(b == '삼성전자'){</p>

<p>temp.append('<option value="KT.삼성전자.갤럭시노트9 512G.">갤럭시노트9 512G</option>');</p>

<p>temp.append('<option value="KT.삼성전자.갤럭시노트9.">갤럭시노트9</option>');</p>

<p>temp.append('<option value="KT.삼성전자.갤럭시 S9 64GB.">갤럭시 S9 64GB</option>');</p>

<p>temp.append('<option value="KT.삼성전자.갤럭시 S9plus 64GB.">갤럭시 S9plus 64GB</option>');</p>

<p>}</p>

<p>if(b == '애플'){</p>

<p>temp.append('<option value="SK.삼성전자.갤럭시노트9 512G.">갤럭시노트9 512G</option>');</p>

<p>temp.append('<option value="SK.삼성전자.갤럭시노트9.">갤럭시노트9</option>');</p>

<p>temp.append('<option value="SK.삼성전자.갤럭시 S9 64GB.">갤럭시 S9 64GB</option>');</p>

<p>temp.append('<option value="SK.삼성전자.갤럭시 S9plus 64GB.">갤럭시 S9plus 64GB</option>');</p>

<p>}</p>

<p>if(b == 'LG'){</p>

<p>temp.append('<option value="KT.삼성전자.갤럭시노트9 512G.">갤럭시노트9 512G</option>');</p>

<p>temp.append('<option value="KT.삼성전자.갤럭시노트9.">갤럭시노트9</option>');</p>

<p>temp.append('<option value="KT.삼성전자.갤럭시 S9 64GB.">갤럭시 S9 64GB</option>');</p>

<p>temp.append('<option value="KT.삼성전자.갤럭시 S9plus 64GB.">갤럭시 S9plus 64GB</option>');</p>

<p>}</p>

<p>});</p>

<p>});</p>

<p></script></p>

<p></body></p>

<p></html></p>

<p>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 3개

�

코딩초보1

7년 전

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

�

하이바네

7년 전

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

7년 전

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

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

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

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

하이바네

7년 전

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

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

</p>

<p><!doctype html></p>

<p><html lang="ko"></p>

<p><head></p>

<p><meta charset="utf-8"></p>

<p><title>jQuery</title></p>

<p><script src="<a href="https://code.jquery.com/jquery-3.3.1.js"></script>" target="_blank" rel="noopener noreferrer">https://code.jquery.com/jquery-3.3.1.js"></script></a></p>

<p></head></p>

<p><body></p>

<p><div></p>

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

<p><table></p>

<p><tr></p>

<p><th rowspan="4" scope="row" style="padding-top: 10px;"></th></p>

<p><td></p>

<p><select data-id="a" name="sel1" style="width:100%;"></p>

<p><option value="">통신사를 선택해주세요.</option></p>

<p><option value="KT">KT</option></p>

<p><option value="SK">SK</option></p>

<p><option value="LG">LG</option></p>

<p></select></p>

<p><select data-id="b" name="sel2" style="width:100%;"></p>

<p><option value="">제조사를 선택해주세요.</option></p>

<p></select></p>

<p><select data-id="c"name="sel3" style="width:100%;"></p>

<p><option value="">휴대폰를 선택해주세요.</option></p>

<p></select></p>

<p><td></p>

<p></tr></p>

<p></table></p>

<p></div></p>

<p><style></p>

<p>input, button {</p>

<p>margin: 0;</p>

<p>padding: 0;</p>

<p>font-size: 1em;</p>

<p>width: 15px;</p>

<p>height: 20px;</p>

<p>}</p>

<p></style></p>

<p><script type="text/javascript"></p>

<p>$(function() {</p>

<p>$("select[data-id=a]").change(function() {</p>

<p>var temp = $("select[data-id=b]");</p>

<p>var a = $(this).val();</p>

<p>temp.children().remove();</p>

<p>temp.append('<option value="">선택하세요</option>');</p>

<p> </p>

<p>if(a == 'KT'){</p>

<p>temp.append('<option value="삼성전자">삼성전자</option>');</p>

<p>temp.append('<option value="애플">애플</option>');</p>

<p>temp.append('<option value="LG">LG</option>');</p>

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

<p>}</p>

<p>if(a == 'SK'){</p>

<p>temp.append('<option value="삼성전자">삼성전자</option>');</p>

<p>temp.append('<option value="애플">애플</option>');</p>

<p>temp.append('<option value="LG">LG</option>');</p>

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

<p>}</p>

<p>if(a == 'LG'){</p>

<p>temp.append('<option value="삼성전자">삼성전자</option>');</p>

<p>temp.append('<option value="애플">애플</option>');</p>

<p>temp.append('<option value="LG">LG</option>');</p>

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

<p>}</p>

<p>});</p>

<p>

 </p>

<p>$("select[data-id=b]").change(function() {</p>

<p>var temp = $("select[data-id=c]");</p>

<p>var b = $(this).val();</p>

<p>temp.children().remove();</p>

<p>temp.append('<option value="">선택하세요</option>');</p>

<p>if(b == '삼성전자'){</p>

<p>temp.append('<option value="갤럭시노트9 512G.">갤럭시노트9 512G</option>');</p>

<p>temp.append('<option value="갤럭시노트9">갤럭시노트9</option>');</p>

<p>temp.append('<option value="갤럭시 S9 64GB.">갤럭시 S9 64GB</option>');</p>

<p>temp.append('<option value="갤럭시 S9plus 64GB.">갤럭시 S9plus 64GB</option>');</p>

<p>}</p>

<p>if(b == '애플'){</p>

<p>temp.append('<option value="갤럭시노트9 512G.">갤럭시노트9 512G</option>');</p>

<p>temp.append('<option value="갤럭시노트9.">갤럭시노트9</option>');</p>

<p>temp.append('<option value="갤럭시 S9 64GB.">갤럭시 S9 64GB</option>');</p>

<p>temp.append('<option value="갤럭시 S9plus 64GB.">갤럭시 S9plus 64GB</option>');</p>

<p>}</p>

<p>if(b == 'LG'){</p>

<p>temp.append('<option value="갤럭시노트9 512G.">갤럭시노트9 512G</option>');</p>

<p>temp.append('<option value="갤럭시노트9.">갤럭시노트9</option>');</p>

<p>temp.append('<option value="갤럭시 S9 64GB.">갤럭시 S9 64GB</option>');</p>

<p>temp.append('<option value="갤럭시 S9plus 64GB.">갤럭시 S9plus 64GB</option>');</p>

<p>}</p>

<p> </p>

<p>});</p>

<p>});</p>

<p>$("select[data-id=c]").change(function(){</p>

<p>$("input[name=wr_1]").val($("select[data-id=a]").val()+','+$("select[data-id=b]").val()+','+$("select[data-id=c]").val());</p>

<p>});</p>

<p></script></p>

<p></body></p>

<p></html></p>

<p>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 6개

�

하이바네

7년 전

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

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

�

코딩초보1

7년 전

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

�

하이바네

7년 전

<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

7년 전

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

�

하이바네

7년 전

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

[/code]

�

코딩초보1

7년 전

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

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

onlymilk47

7년 전

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

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

}

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

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

로그인 후 평가할 수 있습니다

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

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

로그인

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

답변 3개

답변에 대한 댓글 3개

답변에 대한 댓글 6개

공유하기