<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试JSON</title>
<link rel="stylesheet" type="text/css" href="../css/rest.css"/>
<style>
.list{ width:250px; float:left; border:1px solid #CCC; margin-left:20px; margin-top:20px;}
.list h3{ font-size:16px; color:#666; border-bottom:1px solid #ccc; padding:3px 10px;}
.listUl{
height:180px;/*设置每个小方框的高度*/
overflow:auto;
}
.listTxt{line-height:22px; font-size:12px; color:#999; padding:0 20px;}
#main{ width:1100px; margin:0 auto;}
</style>
<script type="text/javascript" language="javascript" src="../js/jQuery-1.7.1.js"></script>
<script type="text/javascript" language="javascript" src="../js/data.js"></script>
<script type="text/javascript" language="javascript">
function addListHtml(){
//a就是年的集合
var buf='';
var yearBuf='',monthBuf='',dayBuf='';
for(var i=0;i<a.length;i++){
var b=a[i].con;//月份的集合
for(var j=0;j<b.length;j++){
var c=b[j].con;//天的集合
for(var k=0;k<c.length;k++){
var d=c[k].con;//数据的集合
buf += '<div class="list"><h3>'
+a[i].year+'年'+b[j].month+'月'+c[k].day+'日</h3>';
buf += '<ul class="listUl">';
for(var m=0;m<d.length;m++){
buf += '<li class="listTxt">'+(m+1)+'、'+d[m]+'</li>';
}
buf+='</ul></div>'
}
}
}
$("#main").append(buf);
var list=$(".list");
if(list.length>minCount){
list.hide();
for(var i=list.length-minCount;i<list.length;i++){
list.eq(i).show();
}
}
}
$(function(){
addListHtml();
addYear();
$("select[name=year]").bind({
change:function(){
addMonth($(this).val());
}
});
$("select[name=month]").bind({
change:function(){
addDay($("select[name=year]").val(),$(this).val())
}
})
$("input[name=search]").click(function(){doSearch()});
});
function addYear(){
var yearBuf='<option value="">==请选择年==</option>';
for(var i=0;i<a.length;i++){
yearBuf +='<option value="'+a[i].year+'">'+a[i].year+'</option>';
}
$("select[name=year]").html(yearBuf);
};
function addMonth(obj){
var monthBuf='<option value="">==请选择月==</option>';
for(var i=0;i<a.length;i++){
if(a[i].year==obj){
var b=a[i].con;
for(var j=0;j<b.length;j++){
monthBuf +='<option value="'+b[j].month+'">'+b[j].month+'</option>';
}
}
}
$("select[name=month]").html(monthBuf);
}
function addDay(obj1,obj2){
var dayBuf='<option value="">==请选择日==</option>';
for(var i=0;i<a.length;i++){
if(a[i].year==obj1){
var b=a[i].con;
for(var j=0;j<b.length;j++){
if(b[j].month==obj2){
var c=b[j].con;//天的集合
for(var k=0;k<c.length;k++){
dayBuf +='<option value="'+c[k].day+'">'+c[k].day+'</option>';
}
}
}
}
}
$("select[name=day]").html(dayBuf);
}
function doSearch(){
var errorMsg=''
if($("select[name=year]").val()==''){
errorMsg="请选择年份";
alert(errorMsg);
return false;
}
if($("select[name=month]").val()==''){
errorMsg="请选择月份";
alert(errorMsg);
return false;
}
var searchyear=$("select[name=year]").val();
var searchmonth=$("select[name=month]").val();
var searchday=$("select[name=day]").val();
var searchBuf='';
for(var i=0;i<a.length;i++){
if(a[i].year==searchyear){
var b=a[i].con;
for(var j=0;j<b.length;j++){
if(b[j].month==searchmonth){
var c=b[j].con;//天的集合
if(searchday!=''){
//当有天的条件的时候
for(var k=0;k<c.length;k++){
if(c[k].day==searchday){
var d=c[k].con;//数据的集合
searchBuf += '<div class="list"><h3>'+a[i].year+'年'+b[j].month+'月'+c[k].day+'日</h3>';
searchBuf += '<ul class="listUl">';
for(var m=0;m<d.length;m++){
searchBuf +='<li class="listTxt">'+(m+1)+'、'+d[m]+'</li>';
}
}
}
}else{
for(var k=0;k<c.length;k++){
var d=c[k].con;//数据的集合
searchBuf += '<div class="list"><h3>'+a[i].year+'年'+b[j].month+'月'+c[k].day+'日</h3>';
searchBuf += '<ul class="listUl">';
for(var m=0;m<d.length;m++){
searchBuf += '<li class="listTxt">'+(m+1)+'、'+d[m]+'</li>';
}
searchBuf+='</ul></div>'
}
}
}
}
}
}
$("#main").html(searchBuf);
}
</script>
</head>
<body>
<div class="search">
<select name="year">
<option value="">==请选择年==</option>
</select>
<select name="month">
<option value="">==请选择月==</option>
</select>
<select name="day">
<option value="">==请选择日==</option>
</select>
<input name="search" type="button" value="搜索" />
</div>
<div id="main" class="clearFix">
</div>
</body>
</html>
js
//配置信息
var minCount=30;//日历显示最小的个数
//数据信息
var a=[
{"year":"2012","con":[
{"month":"1","con":[
{"day":"1","con":[
"【上午】领导A参领导A参领导A参领导A参领导A参领导A参观",
"【上午】领导A参观",
"【下午】领导A参观"
]}
]},
{"month":"2","con":[
{"day":"1","con":[
"【上午】领导A参观",
"【上午】领导A参观",
"【下午】领导A参观"
]}
]}
]}
]