html select태그 대분류 변경시 소분류 리스트 변경

 

대분류에 따라 소분류의 리스트가 변경되는 코드 샘플

 

<select id="cnfmReturnSe" class="cnfmReturnSe" name="cnfmReturnSe" style="width: 200px;">
   <option value="0">선택</option>
   <option value="aaa" >aaa</option>
   <option value="bbb" >bbb</option>
   <option value="ccc" >ccc</option>
</select>
>
<select id="srClSe" class="srClSe" name="srClSe" style="width: 200px;">
   <option value="0">선택</option>
   <option value="ggg" class="sel1">ggg</option>
   <option value="ttt" class="sel1">ttt</option>
   <option value="yyy" class="sel2">yyy</option>
   <option value="uuu" class="sel3">uuu</option>
</select>        

html 코드
class에 sel뒤 숫자를 가지고 구분해서 띄운다

 

$(function () {
		var bigSelId = "#cnfmReturnSe"; // 대분류 id
		var smlSelId = "#srClSe"; // 소분류 id
		function updateSelected() { 
			  $(smlSelId).val(0);
			  $(smlSelId).find("option[value!=0]").detach();
			  $(smlSelId).append(comboSel.filter(".sel" + $(bigSelId+" option").index($(bigSelId+" option:selected"))));
			}
		
		comboSel = $(smlSelId).find("option[value!=0]");
		comboSel.detach();
		
		$(bigSelId).change(updateSelected);
		$(bigSelId).trigger("change");
		
		// 처음 선택되어 있어야할 값. 없을시 ""으로 하면 초기화됨
		var bigSelLoad = "${selectAnswerDrBrdDetail[0].cnfmReturnSe}"; 
		var smlSelLoad = "${selectAnswerDrBrdDetail[0].srClSe}";
		
		// 대분류 값이 있으면 select에 적용
		if(bigSelLoad!="")
		$(bigSelId+' option[value="'+bigSelLoad+'"]').prop("selected", true);
		
		// 대분류값이 바뀌면 소분류 리스트 변경
		$(smlSelId).val(0);
		$(smlSelId).find("option[value!=0]").detach();
		$(smlSelId).append(comboSel.filter(".sel" + $(bigSelId+" option").index($(bigSelId+" option:selected"))));
		
		// 소분류 값이 있으면 select에 적용
		if(smlSelLoad!="")
		$(smlSelId+' option[value="'+smlSelLoad+'"]').prop("selected", true);
});

bigSelId에는 해당 select의 id 입력
bigSelLoad에 선택되어져야할 값이 있을때 value 값을 넣으면 선택되어짐
단, 대분류와 소분류의 관계가 맞아야함