<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function(){
$(document).initialize();
$(document).ramen("東淀川区");
$("input:radio").live("change",function(){
$(document).ramen($(this).val());
});
});
$.fn.initialize = function(){
$.getJSON("ramen.json",
function(data){
$.each(data.ラーメン.地域, function(key,val){
$("div:first fieldset").append("<input type=\"radio\" name=\"ramen\" value=\""+ key +"\">" + key);
});
});
}
$.fn.ramen = function(area){
$.getJSON("ramen.json",
function(data){
var html = "";
$.each(data.ラーメン.地域,function(key,val){
if(key == area){
$.each(val,function(key,val){
html += "<tr>";
html += "<td>店名</td>";
html += "<td>" + key + "</td>";
html += "</tr>";
html += "<tr>";
html += "<td>住所</td>";
html += "<td>" + val.住所 + "</td>";
html += "</tr>";
html += "<tr>";
html += "<td>電話番号</td>";
html += "<td>" + val.電話 + "</td>";
html += "</tr>";
html += "<tr>";
html += "<td>画像</td>";
html += "<td><img src=\"" + val.画像 + "\"></td>";
html += "</tr>";
});
}
});
$("tbody").html(html);
});
}
</script>
<style>
fieldset{
width:800px;
margin:10px;
}
</style>
</head>
<body>
<div>
<fieldset></fieldset>
</div>
<div>
<fieldset>
<table border="1">
<tbody>
</tbody>
</table>
</fieldset>
</div>
</body>
</html>