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

    }

?>

通过select选项动态异步加载内容的更多相关文章

  1. iframe异步加载技术及性能

    我们会经常使用iframes来加载第三方的内容.广告或者插件.使用iframe是因为它可以和主页面并行加载,不会阻塞主页面.当然使用iframe也是有利有弊的:Steve Souders在他的blog ...

  2. Angular.JS + Require.JS + angular-async-loader 来实现异步加载 angular 模块

    传统的 angular 应用不支持异步加载模块,必须在 module 启动的时候,所有模块必须预加载进来. 通过使用 angular-async-loader 库,我们可以使用 requirejs 等 ...

  3. JavaScript异步加载的三种方式——async和defer、动态创建script

    一.script标签的位置 传统的做法是:所有script元素都放在head元素中,必须等到全部js代码都被下载.解析.执行完毕后,才能开始呈现网页的内容(浏览器在遇到<body>标签时才 ...

  4. Win8 Metro动态加载内容框架

    制作背景 为了参加ImagineCup 2013 世界公民类比赛,我们设计制作了一个可动态扩展的幼教类App.这个App需要能动态加载内容,内容包括带动画可交互的电子书,动画,视频,游戏. 技术支持 ...

  5. 动态加载（异步加载）jquery/MUI类库 页面加载完成后加载js类库

    动态加载Mui类库: // ==UserScript== // @name // @version 1.4.0 // @author zzdhidden@gmail.com // @namespace ...

  6. 如何调试异步加载的js文件（浏览器调试动态加载js）

    描述 1:jQuery->var obj= new $.js_Obj():等异步加载js文件,执行方法. obj.method(): 2:页面估计不变,通过声明不同的js文件,进行页面内容的转换 ...

  7. MVC中实现部分内容异步加载

    MVC中实现部分内容异步加载 action中定义一个得到结果集的方法 public ActionResult GetItemTree(string title, int itemid, int? pa ...

  8. 利用Crowbar抓取网页异步加载的内容 [Python俱乐部]

    利用Crowbar抓取网页异步加载的内容 [Python俱乐部] 利用Crowbar抓取网页异步加载的内容 在做 Web 信息提取.数据挖掘的过程中,一个关键步骤就是网页源代码的获取.但是出于各种原因 ...

  9. 在ASP.NET中动态加载内容（用户控件和模板）

    在ASP.NET中动态加载内容(用户控件和模板) 要点: 1． 使用Page.ParseControl 2． 使用base.LoadControl 第一部分:加载模板 下 面是一个模板“<tab ...

随机推荐

  1. 附加、分离数据库和备份、还原数据库的区别（转载于中雪的BLOG）

    备份和恢复的概念: 备份和恢复组件是SQL Server的重要组成部分.备份就是指对SQL Server数据库及其他相关信息进行拷贝,数据库备份记录了在进行备份这一操作时数据库中所有数据的状态,如果数 ...

  2. EA强大的画图工具---设计数据库表格

    http://blog.csdn.net/senior_lee/article/details/30272169?utm_source=tuicool 关于EA这个优秀的软件是从师哥哪里听来的,自己瞎 ...

  3. HDU5196--DZY Loves Inversions 树状数组 逆序数

    题意查询给定[L, R]区间内 逆序对数 ==k的子区间的个数. 我们只需要求出 子区间小于等于k的个数和小于等于k-1的个数,然后相减就得出答案了. 对于i(1≤i≤n),我们计算ri表示[i,ri ...

  4. HDU3726---Graph and Queries 离线处理+Treap

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3726 题意:n个点m条边的一张无向图,每个点有一个权值, 有3中操作. D X 删除第X条边 Q X ...

  5. 介绍一款超实用的演讲必备工具 ZoomIt

    最近在整理以前的文件时,发现躺在某个角落的一个超好的实用的小工具——ZoomIt.此工具是 SysinternalsSuite(已被MS收购)众多实用工具的一个. 相信大家在演讲时,经常需要调整屏幕文 ...

  6. windows下定时利用bat脚本实现ftp上传和下载

    前言: 工作中可能会遇到以下情况,利用windows作为中转,来实现两台linux服务器的文件传输. 实现步骤: 1.FTP上传和下载的bat脚本. 脚本分为两部分:可执行bat脚本和ftp命令文件: ...

  7. Android开发中Handler的经典总结--转载至网络

    一.Handler的定义: 主要接受子线程发送的数据, 并用此数据配合主线程更新UI. 解释:当应用程序启动时,Android首先会开启一个主线程 (也就是UI线程) , 主线程为管理界面中的UI控件 ...

  8. css样式：列表

    css code: /*系统自带的*/ ul li{ list-style-style: disc; } /*自定义图标*/ ul li{ list-style-image: url("im ...

  9. Linux下Weblogic域的创建过程

    环境介绍:操作系统 :Redhat 5.5Weblogic :英文版 8.1.6 Weblogic安装目录 :/weblogic 一.域的建立执行下面语句进入weblogic的bin目录: cd /w ...

  10. javascript中的原型理解总结

    经过几天研究查找资料,对原型终于有点理解了,今天就做下总结,不对之处,希望各位能够提出. 1.每一个Javascript对象(null除外)都和另一个对象相关联,“另一个”对象就是我们今天所要总结的原 ...