Documentation (jquery.szCascadingSelect.js)

1.KeyType : ref (Reference) *******************************

Step1 . Add the following markup to your document <head>
<script src="jquery1.9.1.js"></script> <script src="jquery.szCascadingSelect.js"></script>
Step2 . Add the following markup to your document <body>
<select id="step00" name="step00" data-selbox="step10,step20"><option value=''>- First Step -</option></select>
<select id="step10" name="step10"><option value=''>- Second Step -</option></select>
<select id="step20" name="step20"><option value=''>- Third Step -</option></select>
Step3 . Add the following markup to your document <head>
<script>
$(document).ready(function(){
	
	//definition of reference key & value
	var item0 = {
		"FD":"Food","EL":"Electronics"
	};
	var item1 = {
		"01":["Beverage","FD"],"02":["Health Food","FD"],
		"03":["Computer","EL"],"04":["Refrigerator","EL"]		  
	
	};

	var item2 = {
		"AA":["Carbonated drinks","01"],"AB":["Juice","01"],"AC":["Soybean Milk","01"],
		"BA":["Red Ginseng","02"],"BB":["Honey","02"],
		"CA":["Notebook Computer","03"],"CB":["Desktop Computer","03"],
		"DA":["General Refrigerator","04"],"DB":["Kimchi Refrigerator","04"]
	};

	$("#step00").szCascadingSelect({items:[item0, item1, item2]})
});
</script>


2.KeyType : single ***************************************

Step1 . Add the following markup to your document <head>
<script src="jquery1.9.1.js"></script> <script src="jquery.szCascadingSelect.js"></script>
Step2 . Add the following markup to your document <body>
<select id="step0" name="step0" data-selbox="step1,step2"><option value=''>- Sido -</option></select>
<select id="step1" name="step1"><option value=''>- Gugun -</option></select>
<select id="step2" name="step2"><option value=''>- DongMyeon -</option>
Step3 . Add the following markup to your document <head>
<script>
$(document).ready(function(){
	
	//definition of  key & value
	var addr = [
		{code:"803-456",val:"Gyeonggi-do,Gwacheon-si,Galhyeon-dong"},
		{code:"803-750",val:"Gyeonggi-do,Gwacheon-si,Gwanmun-dong"},
		{code:"805-123",val:"Gyeonggi-do,Gwacheon-si,Burim-dong"},
		{code:"805-752",val:"Gyeonggi-do,Gwangmyeong-si,Okgil-dong"},
		{code:"805-990",val:"Gyeonggi-do,Gwangmyeong-si,Iljik-dong"},
		{code:"806-120",val:"Gyeonggi-do,Guri-si,Galmae-dong"},
		{code:"806-250",val:"Gyeonggi-do,Guri-si,Gyomun-dong"},
		{code:"710-335",val:"Gangwon-do,Gangneung-si,Gangdong-myeon"},
		{code:"710-339",val:"Gangwon-do,Gangneung-si,Nammun-dong"},
		{code:"720-100",val:"Gangwon-do,Donghae-si,Dongho-dong"},
		{code:"720-300",val:"Gangwon-do,Donghae-si,Songjeong-dong"},
		{code:"720-305",val:"Gangwon-do,Donghae-si,Yongjeong-dong"}
	];

	$("#step0").szCascadingSelect({item:addr,keyType:"single",singleKey:"code"});
});
</script>
Optional Parameters
property default Description
keyType ref single : use single variable composed with key and value
ref : use multiple variables
delimiter comma(,) The delimiter of val in case keyType is single
items [] Data variables name array in case keyType is ref
item Data variable name in case keyType is single
singleKey cd The keyName String of data variable in case keyTye is single
singleVal val The ValueName String of data variable in case keyTye is single
data-selbox The Id String(separated by comma) of child select box and descendant select box.
not define in plugin-config, but define in html markup