답변 2개 / 댓글 3개
다중셀렉트로 검색하시면 다양한 예제가 있습니다.
아래는 예전에 스크랩해둔 소스 입니다^^
<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>답변에 대한 댓글 3개
[★code]
별을 지우시고 이 안에 코드를 넣으시면 위 검은색 박스에 나오는 것처럼 됩니다^^
[★/code]
<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]);
}
}
답변을 작성하려면 로그인이 필요합니다.
내용과 관련된 이야기는 아니오나, 혹시 첨부하신 것처럼 코드를 복붙할 수 있는 형태로 올리신 걸 어떻게 하신건지 여쭤봐도 될까요?
이제 막 배우고 있는 뉴비라서 고견을 여쭙습니다ㅠ