通过select选项动态异步加载内容

　　通过监听select的change事件来异步加载数据。

1：效果图：

选择Good:

选择 Bad:

2：index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    ul{ border: 1px solid black;list-style: none;padding: 0px;margin: 0px;float: left;width: 300px;}
    li{ padding: 10px 5px;border-bottom: 1px solid black;}
    </style>
    <script type="text/javascript" src="../../js/jquery.js"></script>
    <script type="text/javascript">
    $(function(){
        $('#choice').change(function(){
        if($(this).val()!=''){
            $.get(
            'data.php',
            {what:$(this).val()},
            function(data){
                $('#result').html(data);    
            }
            );    
        }else{
            $('#result').html('');    
        }    
        });    
    });
    </script>
</head>
<body>
   <form>
       <p>Show list of:
         <select id="choice">
        <option value="">select</option>
        <option value="g">Good</option>
        <option value="b">Bad</option>
         </select>
       </p>
       <p id="result"></p>
   </form>
</body>
</html>

3:服务端 data.php

<?php
    if($_GET['what']=='g'){
    $names=array('张三','李四','王无');    
    echo getHTML($names);
    }else if($_GET['what']=='b'){
    $names=array('喇嘛','本拉登','小泉');    
    echo getHTML($names);
    }

    function getHTML($names){
    $strRes='<ul>';
    $count=count($names);
    for($i=0;$i<$count;$i++){
        $strRes.='<li>'.$names[$i].'</li>';    
    }    
    $strRes.='</ul>';
    return $strRes;
    }
?>

 

 

 

posted @ 2013-10-25 17:05  yshy  阅读(1610)  评论(0)  编辑  收藏  举报