通过select选项动态异步加载内容
生活随笔
收集整理的這篇文章主要介紹了
通过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
<?phpif($_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;} ?>?
?
?
轉載于:https://www.cnblogs.com/yshyee/p/3388273.html
總結
以上是生活随笔為你收集整理的通过select选项动态异步加载内容的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： (android 实战总结)androi
- 下一篇： [译]Kinect for Window