<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> <title></title> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"> <script src="js/mobiscroll.full.min.js" type="text/javascript"></script> <link href="css/mobiscroll.full.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $("#index").live("pagebeforecreate",function(){ $('#select').scroller('destroy').scroller($.extend({preset:'select',inputClass:'i-txt'}, { theme: "jqm", mode: $('#mode').val(), display: "modal", beforeShow: show, onClose: hide })); function show(){} function hide(){} $('#select_dummy').textinput(); }); $("#index").live("pageshow",function(){ $("#select").live("change",function(){ var api = "http://vesta-tmp.sakura.ne.jp/xml-jsonp.php?callback=?"; if(parseInt($("#select").val()) < 100000){ var pref = "0" + $("#select").val(); } else{ var pref = $("#select").val(); } $.getJSON(api,{ xml:"jws.jalan.net/APICommon/OnsenSearch/V1/?key=aqr135c71ee600&pref=" + pref, key:"aqr135c71ee600" },function(data){ var html = ""; $.each(data.Onsen, function(i,item){ html += "<ul data-role=\"listview\" data-inset=\"true\">"; html += "<li data-role=\"list-divider\">" + item.OnsenName + "</li>"; html += "<li><h1>" + item.OnsenAddress + "</h1></li>"; html += "</ul>"; }); $("#spring").html(html); $("#spring ul").listview(); }); }); }); </script> <style> </style> </head> <body data-enhance="false"> <div data-role="page" id="index"> <div data-role="header"> <h1>じゃらんのAPIから全国の温泉を検索する</h1> </div> <div data-role="content"> <label for="i">都道府県</label> <select name="都道府県" id="select" data-role="none"> <option value="10000">北海道</option> <option value="20000">青森県</option> <option value="30000">岩手県</option> <option value="40000">宮城県</option> <option value="50000">秋田県</option> <option value="60000">山形県</option> <option value="70000">福島県</option> <option value="90000">群馬県</option> <option value="80000">栃木県</option> <option value="100000">茨城県</option> <option value="110000">埼玉県</option> <option value="120000">千葉県</option> <option value="130000">東京都</option> <option value="140000">神奈川県</option> <option value="160000">長野県</option> <option value="170000">新潟県</option> <option value="180000">富山県</option> <option value="190000">石川県</option> <option value="200000">福井県</option> <option value="210000">静岡県</option> <option value="220000">岐阜県</option> <option value="230000">愛知県</option> <option value="240000">三重県</option> <option value="250000">滋賀県</option> <option value="260000">京都府</option> <option value="270000">大阪府</option> <option value="280000">兵庫県</option> <option value="290000">奈良県</option> <option value="300000">和歌山県</option> <option value="310000">鳥取県</option> <option value="320000">島根県</option> <option value="330000">岡山県</option> <option value="340000">広島県</option> <option value="350000">山口県</option> <option value="360000">徳島県</option> <option value="370000">香川県</option> <option value="380000">愛媛県</option> <option value="390000">高知県</option> <option value="400000">福岡県</option> <option value="410000">佐賀県</option> <option value="420000">長崎県</option> <option value="430000">熊本県</option> <option value="440000">大分県</option> <option value="450000">宮崎県</option> <option value="460000">鹿児島県</option> <option value="470000">沖縄県</option> </select> <div id="spring"></div> </div> <div data-role="footer" data-position="fixed"> <h4>Yohsuke Nakano</h4> </div> </div> </body> </html>