<!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 type="text/javascript">
$(function(){
$.getJSON("chapter695.json",
function(data){
var i = 0;
$.each(data.colors, function(key,val){
$("select").append("<option value=\"" + i + "\">" + val.jp + "</option>");
i++;
});
});
$("select").live("change",function(){
$.getJSON("chapter695.json",
function(data){
var i = 0;
$.each(data.colors, function(key,val){
switch($("select").val()){
case "0":
if(i == 0){
$("div").html(val.en).css("background-color", val.code);
}
break;
case "1":
if(i == 1){
$("div").html(val.en).css("background-color", val.code);
}
break;
case "2":
if(i == 2){
$("div").html(val.en).css("background-color", val.code);
}
break;
}
i++;
});
});
});
});
</script>
<style type="text/css">
div{
width:200px;
height:200px;
background-color:#808080;
text-align:center;
line-height:200px;
margin:10px;
}
</style>
</head>
<body>
<select>
<option value="">---</option>
</select>
<div>grey</div>
</body>
</html>
JSON
{
"colors": {
"data1": {
"jp": "赤",
"en": "red",
"code": "#FF0000"
},
"data2": {
"jp": "青",
"en": "blue",
"code": "#0000FF"
},
"data3": {
"jp": "緑",
"en": "green",
"code": "#00FF00"
}
}
}