jquery操作json

1.
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>Select a date to view Travel  Details</h3>
<p>
<select id="travelDates">
</select>
<ul>
     <li id="origin"></li>
     <li id="destination"></li>
     <li id="travellers"></li>
</ul>
<script type="text/javascript" src="../jquery-1.11.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
     var jsonResult;
     $.getJSON("json.php",function(data){
          jsonResult=data;
          var str='<option value="">select a date</option>';
          for(var i=0;i<data.length;i++){
               str+='<option value="'+data[i].travelDate+'">'+data[i].travelDate+'</option>';
          }
          $('#travelDates').html(str);
          $('#travelDates').change(function(){
               if($(this).val()!=''){
                    displayDetails($(this).val());
               }
          });
     });
    
    
     function displayDetails(selectedDate){
          for(var i=0;i<jsonResult.length;i++){
               var aResult=jsonResult[i];
               if(aResult.travelDate==selectedDate){
                    $('#origin').html('<strong>Origin:</strong>'+aResult.origin);
                    $('#destination').html('<strong>Destination : </strong>'+aResult.destination);
                    var travellers=aResult.passengers;
                    var strTravellers='';
                    for(var j=0;j<travellers.length;j++){
                      
                         strTravellers=strTravellers+travellers[j].name;
                        
                    }
                   
                    $('#travellers').html('<strong>Travellers :<br/></strong>'+strTravellers);
                    break;
               }
          }
     }
});

</script>
</body>
</html>
 
2.json.php
<?php
$data=array(array(
'origin'=>'delhi3',
'destination'=>'london',
'passengers'=>array(
array('name'=>'mr eee','type'=>'audit','age'=>34),
array('name'=>'mr eee22','type'=>'audit','age'=>34)
),
'travelDate'=>'11'
),
array(
'origin'=>'delhi2',
'destination'=>'london',
'passengers'=>array(
array('name'=>'mr eee','type'=>'audit','age'=>34),
array('name'=>'mr eee22','type'=>'audit','age'=>34)
),
'travelDate'=>'12'
),
array(
'origin'=>'delhi32',
'destination'=>'london',
'passengers'=>array(
array('name'=>'mr eee','type'=>'audit','age'=>34),
array('name'=>'mr eee22','type'=>'audit','age'=>34)
),
'travelDate'=>'13'
));
header('Content-Type:text/json');
echo json_encode($data);
posted @ 2014-04-04 17:26  wint  Views(143)  Comments(0)    收藏  举报