通过监听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; } ?>