셀렉트박스 하위 추가 채택완료

은빛여전사 6년 전 조회 2,065

</p>

<p> </p>

<p><select id="wr_2"> 

<option value="">가가가가</option> 

<option value="나나나나 ">나나나나 </option> 

<option value="다다다다 ">다다다다</option> 

<option value="라라라라 ">라라라라</option> 

</select> 

<span id="result2"></span> </p>

<p><script> 

$('#wr_2').on('change', function() { 

    $('#result2').text( this.value ? this.value : '' ); 

}); 

</script></p>

<p> </p>

<p>

위 코드는 아래와 같이 나타나게 되는데요

하위셀렉트 박스를 하나 추가 하려고 합니다

1단계에서 나나나나 를 선택할 경우

2단계에서 가가 나나 다다
3가지중 선택해서 아래와 같이 값을 출력 하고자 합니다

위 이미지 처럼 하려면 어떻게 해야 할까요?

#그누보드 #셀렉트박스 #하위셀렉트박스

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

답변 1개

정렬:

채택된 답변

+20 포인트

애드프로

6년 전

2차 셀렉트 박스 소스 입니다.

스크립트부분

</p>

<pre>
<script type="text/javascript">
  function changes(fr) {
    if(fr==1) {
    //뿌려줄값을 배열로정렬
    num = new Array("1)첫번째목록","1)두번째목록","1)세번째목록");
    vnum = new Array("1","2","3");
    } else if(fr==2) {
      num = new Array("2)첫번째목록","2)두번째목록","2)세번째목록");
    vnum = new Array("1","2","3");
    }
    // 셀렉트안의 리스트를 기본값으로 한다..
  for(i=0; i<form.test2.length; i++) {
    form.test2.options[0] = null;
  }
    //포문을 이용하여 두번째(test2)셀렉트 박스에 값을 뿌려줍니당)
  for(i=0;i < num.length;i++) {
    document.form.test2.options[i] = new Option(num[i],vnum[i]);
  }
}
</script></pre>

<p>

HTML 부분

</p>

<pre>
<div>
  <form name="form">
  <select name="test" onchange="changes(document.form.test.value)">
    <option value="">--선태하여주세요--</option>
    <option value="1">1번입니다</option>
    <option value="2">2번입니다</option>
  </select>
    <select name="test2">
    <option>--소분류입니다--</option>
  </select>
</form>
</div></pre>

<p>

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

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

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

로그인

셀렉트박스 하위 추가 채택완료

답변 1개

공유하기