<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>
<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>
<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>
<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>
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 |