답변 2개
다중셀렉트로 검색하시면 다양한 예제가 있습니다.
아래는 예전에 스크랩해둔 소스 입니다^^
↑위처럼 셀렉트 박스가 선택한 값에 따라서 Option 함수를 이용해서 그에 따라 변화하는 셀렉트 박스의 값들을 지정해주면 된다. 값을 분류할 때 "if"문이나 "case"문을 사용하면 된다. 귀찮아서 그냥 "if"문으로 했지만...ㅎㅎㅎ 그리고 form.Step은 표준으로 document.getElementbyId("Step")으로 바꾸어주는게 좋다. 손에 익어 그냥 써버린...form.Step.....표준을 지키자!
[원본소스]
</p><p><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단계--");</p><p> 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></p><p>
<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> </p><p>
출처 - http://blog.naver.com/tobi_ya/60072205632">http://blog.naver.com/tobi_ya/60072205632
답변에 대한 댓글 3개
[★code]
별을 지우시고 이 안에 코드를 넣으시면 위 검은색 박스에 나오는 것처럼 됩니다^^
[★/code]
댓글을 작성하려면 로그인이 필요합니다.
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 f.SDIV.options[0] = null; } for(k=0;k < num.length;k++) { f.SDIV.options[k] = new Option(num[k],vnum[k]); } }
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
내용과 관련된 이야기는 아니오나, 혹시 첨부하신 것처럼 코드를 복붙할 수 있는 형태로 올리신 걸 어떻게 하신건지 여쭤봐도 될까요?
이제 막 배우고 있는 뉴비라서 고견을 여쭙습니다ㅠ