szCascadingSelect.js

1.Single KeyType

You can get the code of selected option by $(selector).data("cd")
when last step is determined

Selected Code :
Script Code
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",delimiter:"."});
Html Code
<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></select>



2.Reference KeyType

You can get the code of selected option by $(selector).val()
when each step is determined

Selected Code :
Script Code
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]});
Html Code
<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>