셀렉트박스 하위 추가

셀렉트박스 하위 추가

QA

셀렉트박스 하위 추가

본문


 
<select id="wr_2"> 
<option value="">가가가가</option> 
<option value="나나나나 ">나나나나 </option> 
<option value="다다다다 ">다다다다</option> 
<option value="라라라라 ">라라라라</option> 
</select> 
<span id="result2"></span> 
<script> 
$('#wr_2').on('change', function() { 
    $('#result2').text( this.value ? this.value : '' ); 
}); 
</script>
 

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

3534908391_1565618941.576.jpg

 

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

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

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

3534908391_1565619009.8841.jpg

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

이 질문에 댓글 쓰기 :

답변 1

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

 

스크립트부분



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

 

HTML 부분



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

답변을 작성하시기 전에 로그인 해주세요.
전체 117
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT