通过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选项动态异步加载内容相关推荐

php ajax 下载图片路径,JavaScript_批量下载对路网图片并生成html的实现方法，对路使用ajax实现异步加载内容 - phpStudy...
批量下载对路网图片并生成html的实现方法对路使用ajax实现异步加载内容,在它的js代码中找到了相关代码 type : 'POST', url : '/index.php/request/new_ ...
iframe异步加载技术及性能
我们会经常使用iframes来加载第三方的内容.广告或者插件.使用iframe是因为它可以和主页面并行加载,不会阻塞主页面.当然使用iframe也是有利有弊的:Steve Souders在他的blog ...
ajax异步查询demo,ASP.NET中AJAX的异步加载（Demo演示）
此次的demo是一个页面,页面上有两行字,然后后面用ajax,使用一个下拉框去替换第一行文字[/code] 第一个是被替换的网页 var xmlhttprequest; function create ...
Echarts 图表在异步加载数据时，增加loading动画，提升用户体验感
文章目录一.简介二.增加loading加载动效 2.1 实现原理 2.2 实现步骤 2.3 实现效果图三.完整源代码及解析一.简介 Echarts 图表在异步请求数据时,如果加载时间较长,一个 ...
JQuery Datatables 动态配置参数异步加载数据
背景需求在前端动态设置datatables需要传递到后端的查询参数,异步加载返回的数据.点击这里进入datatables中文网异步加载数据说明直接上代码 var table; var url = ...
extjs2.0 ie8 下拉树_extjs2下拉树选项框comboxWithTree(支持异步加载子节点）
extjs版本:2.2 简介:支持单选.异步加载子节点(当然一下子拼接好全部节点的json也是绝对没问题的),要支持多选则需要自行设置,(已测试通过)浏览器兼容ie8.谷歌.FF. 资料参考:搜索一下 ...
ajax加载多次很卡,使用JQuery UI选项卡多次加载Ajax内容
嗨我基本上是通过单独的JQueryUI选项卡中的AJAX调用单个php页面(及其表单).该代码是这样的:使用JQuery UI选项卡多次加载Ajax内容 Home Profile Statistic ...
利用Crowbar抓取网页异步加载的内容 [Python俱乐部]
利用Crowbar抓取网页异步加载的内容 [Python俱乐部] 利用Crowbar抓取网页异步加载的内容 [Python俱乐部] 利用Crowbar抓取网页异步加载的内容在做 Web 信息提取.数 ...
ztree异步加载数据amp;amp;amp;amp;amp;amp;amp;amp;给父节点动态追加子节点
对于ztree,整了两天了,在数据库中查出json符合格式的数据,这很好整,但是在ztree追加时出现重复节点,找了半天资源,最终还是用ztree自带的异步加载解决问题,特此记录一下下!!如果不足请指 ...

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

通过select选项动态异步加载内容相关推荐

最新文章

热门文章