두개의 SelectBox 연계 (1차분류, 2차분류)

두개의 SelectBox 연계 (1차분류, 2차분류)

 

- 1차분류 SelectBox 선택 시 그에 따른 2차 분류 SelectBox 채우기

 

- 자바 스크립트 연계

 

- 적용예: 시도 => 구군동 등

 

 

1. 1차 분류의 SelectBox Value 가 1부터 순차적으로 있는 경우 ( 1,2,3,4,... )

 

- 분류에 있는 순차값으로 배열을 생성

 

<script language="javascript" type="text/javascript"> <!-- function changeSiDo(iptSiDo, iptGuGun) { var siDoLen = iptSiDo.options.length; var guGun = new Array(siDoLen); for (var i = 0; i &lt;= siDoLen; i++) { guGun[i] = new Array(); } &lt;% string siDoCode = ""; string siDoCodeOld = ""; string guGunCode = ""; string guGunName = ""; int num = 0; foreach (var basicSiDoGuGun in Model.BasicSiDoGuGunAll) { siDoCode = basicSiDoGuGun.SiDoCode; guGunCode = basicSiDoGuGun.GuGunCode; guGunName = basicSiDoGuGun.GuGunName; if (siDoCode != siDoCodeOld) num = 1; else num += 1; %&gt; guGun[&lt;%=int.Parse(siDoCode) %&gt;][&lt;%=num%&gt;] = new Option("&lt;%=guGunName%&gt;","&lt;%=guGunCode%&gt;"); &lt;% siDoCodeOld = siDoCode; } %&gt; var formObj1 = iptSiDo; var formObj2 = iptGuGun; var typeInt1; var typeInt1=formObj1.options[formObj1.options.selectedIndex].value; typeInt1 = Number(typeInt1); if (typeInt1 == 0) { iptGuGun.selected = 0; iptGuGun.length = 1; return; } formObj2.length=1; for (var i = 1; i &lt; guGun[typeInt1].length; i++) { formObj2.options[i]=new Option(guGun[typeInt1][i].text,guGun[typeInt1][i].value); } } --> </script> -- 호출방법 %= Html.DropDownList("SiDoCode", Model.SiDoSelList, "--선택--", new { onchange = "changeSiDo(document.RegisterForm.SiDoCode,document.RegisterForm.GuGunCode);", @class = "select_field2", style = "width:150px" })%>

 

 

2. 1차 분류의 SelectBox Value 가 1부터 아니거나 순차적이지 않은 경우 ( 2,5,10 )

 

- 앞뒤 비교하여 순차값으로 처리후 배열 생성

 

function changeMainSub(iptMain, iptSub) { var iptMainLen = iptMain.options.length; var vntSub = new Array(iptMainLen); for (var i = 0; i <= iptMainLen; i++) { vntSub[i] = new Array(); } <% string jsMainCode = ""; string jsMainCode2 = ""; string jsMainCode_Old = ""; string jsvntSubCode = ""; string jsvntSubName = ""; int jsNum = 0; int jsTopNum = 0; dt = ds.Tables[1]; dt_top = ds.Tables[0];] for (int iIndex = 0; iIndex < dt.Rows.Count; iIndex++) { jsMainCode = dt.Rows[iIndex]["Parent_Code"].ToString(); jsvntSubCode = dt.Rows[iIndex]["Code"].ToString(); jsvntSubName = dt.Rows[iIndex]["Value"].ToString(); if (jsMainCode != jsMainCode_Old) { jsNum = 1; for (int jIndex = 0;jIndex < dt_top.Rows.Count; jIndex++) { jsMainCode2 = dt_top.Rows[jIndex]["Code"].ToString(); if (jsMainCode == jsMainCode2) { jsTopNum = jIndex + 1; } } } else { jsNum += 1; } %> vntSub[<%=jsTopNum %>][<%=jsNum%>] = new Option("<%=jsvntSubName%>","<%=jsvntSubCode%>"); <% jsMainCode_Old = jsMainCode; } %> var formObj1 = iptMain; var formObj2 = iptSub; var typeInt1; var typeInt1=formObj1.options.selectedIndex; typeInt1 = Number(typeInt1) + 1; if (typeInt1 == 1) { formObj2.selected = 0; formObj2.length = 1; return; } formObj2.length=1; for (var i = 1; i < vntSub[typeInt1].length; i++) { formObj2.options[i]=new Option(vntSub[typeInt1][i].text,vntSub[typeInt1][i].value); } } -- 호출방법 <select name="iptMain" id="iptMain" onchange = "javascript:changeMainSub(document.frmData.iptMain,document.frmData.iptSub);">

 

 

3. 호출

 

1) form 안에 객체가 있는 경우

 

- onchange="javascript:changeMainSub(document.FormData.SiDo,document.FormData.Gugun);"

 

2) form 안에 객체가 없는 경우

 

- onchange="javascript:changeMainSub('SiDo','Gugun');"

 

- 위 1,2번 두 함수에서 객체를 받지 않고 이름으로 받은다음 eval 함수 사용

function changeMainSub(iptMainName, iptSubName) { // 변경 부분, 파라미터 포함 var iptMain = eval(iptMainName); var iptSub = eval(iptSubName); // 변경 부분, 파라미터 포함 끝 var iptMainLen = iptMain.options.length; var vntSub = new Array(iptMainLen); .... }