셀렉트박스 하위 추가
본문
<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>
위 코드는 아래와 같이 나타나게 되는데요
하위셀렉트 박스를 하나 추가 하려고 합니다
1단계에서 나나나나 를 선택할 경우
2단계에서 가가 나나 다다
3가지중 선택해서 아래와 같이 값을 출력 하고자 합니다
위 이미지 처럼 하려면 어떻게 해야 할까요?
답변 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>
답변을 작성하시기 전에 로그인 해주세요.
