<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#result{
width:200px;
height: 100px;
background-color: yellow;
}
</style>
<script type="text/javascript">
var f_arr=new Array("한식",'중식','일식','외국식');
var s_arr = new Array();
s_arr[0] = new Array('김치찌개', '된장찌개', '불고기', '설렁탕', '뼈해장국');
s_arr[1] = new Array('탕수육', '팔보채', '깐풍기','볶음밥');
s_arr[2] = new Array('초밥', '덮밥', '문어구이'/* ,'스시','우동' */);
s_arr[3] = new Array('스테이크', '캐비어', '푸아그라', '파스타','월남쌈');
function abc(){
alert('버튼 딴거 클릭');
}
function init(){
//alert('init');
var f_sel = myform.first;
f_sel.options[0] = new Option('선택');
for(var i=0;i<f_arr.length;i++){
f_sel.options[i+1] = new Option(f_arr[i],f_arr[i]); //먼저 쓴게 텍스트 뒤가 밸류
}
var s_sel = myform.second;
s_sel.options[0] = new Option('선택'); //하나만 써진 경우 텍스트와 벨류 둘다 같이 설정된다.
}
function firstChange(){
//alert("fc")
f_sel=myform.first;
s_sel=myform.second;
f_selIndex=f_sel.selectedIndex;
f_selValue=f_sel[f_selIndex].value;
f_selText=f_sel[f_selIndex].text;
//alert(f_selIndex+','+f_selValue+','+f_selText);
//이전 옵션 지우기 뒤에서부터 지워야한다. 앞에서부터 지우면 하나씩 건너뛰게 됨
//1부터 지운다 했을때 1을 지우면 2가 1이 되어 안지워지고 3이 2가돼서 지워지고 의 반복.
for(var i=s_sel.length-1;i>0;i--){
s_sel.options[i]=null;
}
for(var i=0;i<s_arr[f_selIndex-1].length;i++){
s_sel.options[i+1]=new Option(s_arr[f_selIndex-1][i]);
}
}
function secondChange() {
f_sel=myform.first;
s_sel=myform.second;
f_selIndex=f_sel.selectedIndex;
f_selValue=f_sel[f_selIndex].value;
s_selIndex=s_sel.selectedIndex;
s_selValue=s_sel[s_selIndex].value;
//alert(f_selValue+','+s_selValue);
var area = document.getElementById('result');
area.innerHTML="선택한 메뉴는<br>"+f_selValue+','+s_selValue+"입니다";
}
</script>
</head>
<body onLoad="init()"> <!-- 바로 init 호출된다 -->
<form name="myform">
<input type="button" value="클릭" onclick="alert('버튼 클릭')">
<input type="button" value="클릭" onclick="abc()">
<select name='fruit'>
<option value='a'>apple</option> <!-- 옵션에 밸류와 택스트가 있어야한다. -->
<option selected value='b'>grape</option>
<option value='orange'>orange</option>
</select>
<select id="first" style="width:100px;" onChange="firstChange()">
</select>
<select id="second" style="width:100px;" onChange="secondChange()">
</select>
</form>
<div id="result">
</div>
</body>
</html>
Insert title here