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
<![CDATA[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
<![CDATA[<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
<![CDATA[
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
<![CDATA[
<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>
]]>