Webix+ADDRAjax で住所ドリルダウン検索を行う。
ポイントはui.selectビューのattributesプロパティでname属性を指定してあげることです。ビューのnameプロパティはエレメントのname属性とはまた別なので注意。
サンプル
webix,ADDRAjax(&jQuery)は先に読み込んでおいてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
webix.ready(function(){ new webix.ui({ view:"form", id:"form", rows: [ { id:"address", cols:[ { width:200, name:"pref", attributes:{ name:"pref" }, view:"select", label:"都道府県", labelAlign:'right', options:[ { value:"↓(都道府県)"} ] }, { width:200, name:"city", attributes:{ name:"city" }, view:"select", label:"市区町村", labelAlign:'right', options:[ { value:"↓(市区町村)"} ] }, { width:180, name:"town", attributes:{ name:"town" }, view:"select", label:"町域", labelAlign:'right', options:[ { value:"↓(町域)"} ] }, ] }, { view:"button", id:"form_Send_btn", value:"取得", type:"form"} ] }).show(); //formから選択された項目を取得 $$("form_Send_btn").attachEvent("onItemClick", function(){ var param = $$("form").getValues(); alert(JSON.stringify(param, " ", "n")) }) //addrajaxの設定 var addrajax = new ADDRAjax( 'pref', 'city', 'town' ); addrajax.JSONDATA = 'http://shimz.me/libs/addrajax/data/'; addrajax.init(); addrajax.setAddress('群馬県'); }); |
