onChange함수를 이용한 선택에따라 달라지는 SelectBox

프로모션중에 종종 셀렉트박스 선택에따라 다른 옵션값들을 보여줘야 할 때가 있다. 

주로 아래 소스를 사용했다.

소스 :

<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>

fnCngList 함수 :

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]);
	}
}

함수안에 IF문으로 상위 셀렉트박스의 value값을 비교하여
하위 셀렉트박스의 텍스트와, value값을 배열에담고 옵션을 for문으로 재생성해준다.