셀렉트박스 선택시 하위 셀렉트값이 바뀌는것
본문
광주를 선택하면 광주에 속한 구가 전부나오고
서울을 선택하면 서울에 속한 구가 나오는
예제같은소스가있을까요?
답변 2
다중셀렉트로 검색하시면 다양한 예제가 있습니다.
아래는 예전에 스크랩해둔 소스 입니다^^
<html>
<script type="text/javascript">
//첫번째 셀렉트 박스의 값이 바뀌었을 때
function changes1Step(fr) {
if(fr=="용병") {
num = new Array("--2단계--", "소드맨","아처","매지션");
vnum = new Array("--2단계--", "소드맨","아처", "매지션");
}
else if(fr=="아이템") {
num = new Array("--2단계--", "무기","방어구","장신구", "잡화", "합성석");
vnum = new Array("--2단계--", "무기","방어구","장신구", "잡화", "합성석");
}
//두번째에 들은 셀렉트 박스 초기화
for(i=0; i<form.Step2.length; i++) {
form.Step2.options[i] = null;
}
//세번째 셀렉트 박스 초기화
for(i=0; i<form.Step3.length; i++) {
form.Step3.options[i] = null;
}
//세번째 박스의 첫번째 값 강제로 지정
form.Step3.options[0] = new Option("--3단계--", "--3단계--");
//두번째값 넣어주기(Option함수 이용)
for(i=0; i<num.length; i++) {
form.Step2.options[i] = new Option(num[i],vnum[i]);
}
}
// 두번째 셀렉트 박스의 값이 변화했을 때
function changes2Step(fr) {
if(fr=="소드맨") {
num = new Array("--3단계--", "버서커", "팔라딘");
vnum = new Array("--3단계--", "버서커", "팔라딘");
}
else if(fr=="아처") {
num = new Array("--3단계--", "헌터", "레인저");
vnum = new Array("--3단계--", "헌터", "레인저");
}
else if(fr=="매지션") {
num = new Array("--3단계--", "소서러","위자드");
vnum = new Array("--3단계--", "소서러","위자드");
}
↓ 중간 생략~~~
else
{
num = new Array("--3단계--");
vnum = new Array("--3단계--");
}
for(i=0; i<form.Step3.length; i++) {
form.Step3.options[i] = null;
}
for(i=0; i<num.length; i++) {
form.Step3.options[i] = new Option(num[i],vnum[i]);
}
}
</script>
↑위처럼 셀렉트 박스가 선택한 값에 따라서 Option 함수를 이용해서 그에 따라 변화하는
셀렉트 박스의 값들을 지정해주면 된다.
값을 분류할 때 "if"문이나 "case"문을 사용하면 된다.
귀찮아서 그냥 "if"문으로 했지만...ㅎㅎㅎ
그리고 form.Step은 표준으로 document.getElementbyId("Step")으로 바꾸어주는게 좋다.
손에 익어 그냥 써버린...form.Step.....표준을 지키자!
<div>
<form name='form'>
↓여기 밑에서 처럼 셀렉트 박스의 값이 변화할 때 행동을 지정할 "onchange"를 넣는다.
<select id="Step1" name='Step1' onchange='changes1Step(value)'>
<option>--1단계--</option>
<option value="용병">용병</option>
<option value="아이템">아이템</option>
</select>
<select id="Step2" name='Step2' onchange='changes2Step(value)'>
<option>--2단계--</option>
</select>
<select name='Step3' id="Step3">
<option>--3단계--</option>
</select>
</form>
</div>
</html>
[원본소스]
<html>
<script>
function changes1Step(fr) {
if(fr=="용병") {
num = new Array("--2단계--", "소드맨","아처","매지션");
vnum = new Array("--2단계--", "소드맨","아처", "매지션");
}
else if(fr=="아이템") {
num = new Array("--2단계--", "무기","방어구","장신구", "잡화", "합성석");
vnum = new Array("--2단계--", "무기","방어구","장신구", "잡화", "합성석");
}
for(i=0; i<form.Step2.length; i++) {
form.Step2.options[i] = null;
}
for(i=0; i<form.Step3.length; i++) {
form.Step3.options[i] = null;
}
form.Step3.options[0] = new Option("--3단계--", "--3단계--");
for(i=0; i<num.length; i++) {
form.Step2.options[i] = new Option(num[i],vnum[i]);
}
}
function changes2Step(fr) {
//용병 선택
if(fr=="소드맨") {
num = new Array("--3단계--", "버서커", "팔라딘");
vnum = new Array("--3단계--", "버서커", "팔라딘");
}
else if(fr=="아처") {
num = new Array("--3단계--", "헌터", "레인저");
vnum = new Array("--3단계--", "헌터", "레인저");
}
else if(fr=="매지션") {
num = new Array("--3단계--", "소서러","위자드");
vnum = new Array("--3단계--", "소서러","위자드");
}
//아이템 선택
else if(fr=="무기") {
num = new Array("--3단계--", "검","활","지팡이");
vnum = new Array("--3단계--", "검","활", "지팡이");
}
else if(fr=="방어구") {
num = new Array("--3단계--", "갑옷","투구","장갑", "신발");
vnum = new Array("--3단계--", "갑옷","투구","장갑", "신발");
}
else if(fr=="장신구") {
num = new Array("--3단계--", "반지","목걸이");
vnum = new Array("--3단계--", "반지","목걸이");
}
else if(fr=="잡화") {
num = new Array("--3단계--", "");
vnum = new Array("--3단계--", "");
}
else if(fr=="합정석") {
num = new Array("--3단계--", "");
vnum = new Array("--3단계--", "");
}
else
{
num = new Array("--3단계--");
vnum = new Array("--3단계--");
}
for(i=0; i<form.Step3.length; i++) {
form.Step3.options[i] = null;
}
for(i=0; i<num.length; i++) {
form.Step3.options[i] = new Option(num[i],vnum[i]);
}
}
</script>
<div>
<form name='form'>
<select name='Step1' onchange='changes1Step(value)'>
<option>--1단계--</option>
<option value="용병">용병</option>
<option value="아이템">아이템</option>
</select>
<select name='Step2' onchange='changes2Step(value)'>
<option>--2단계--</option>
</select>
<select name='Step3'>
<option>--3단계--</option>
</select>
</form>
</div>
</html>
출처 - http://blog.naver.com/tobi_ya/60072205632
<ul>
<li>
<select name="BDIV" id="ctg" class="sel_cate" onchange="fnCngList(this.value);">
<option value="">대분류</option>
<option value="B1">분류1</option>
<option value="B2">분류2</option>
<option value="B3">분류3</option>
</select>
</li>
<li>
<select name="SDIV" id="ctg_nm" class="sel_list">
<option value="">소분류</option>
</select>
</li>
</ul>
function fnCngList(sVal){
var f = document.form1;
var opt = $("#ctg_nm option").length;
if(sVal == "") {
num = new Array("소분류");
vnum = new Array("");
}else if(sVal == "B1") {
num = new Array("분류1-1","분류1-2","분류1-3");
vnum = new Array("1-1","1-2","1-3");
}else if(sVal == "B2") {
num = new Array("분류2-1","분류2-2","분류2-3");
vnum = new Array("2-1","2-2","2-3");
}else if(sVal == "B3") {
num = new Array("분류3-1","분류3-2","분류3-3");
vnum = new Array("3-1","3-2","3-3");
}
for(var i=0; i<opt; i++) {
f.SDIV.options[0] = null;
}
for(k=0;k < num.length;k++) {
f.SDIV.options[k] = new Option(num[k],vnum[k]);
}
}
