通过监听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. Boost 和 STL 相比有哪些优势和劣势？

    1. 在设计原则上,STL和Boost大体统一因为STL和Boost基本上都是标准委员会那批人在策划.审核和维护,所以口味上是相对接近的.但是因为Boost并不在标准中,或者说是下一代标准的试验场,所 ...

  2. 如何获取drawable目录下的图片绝对路径

    Uri uri = Uri.parse(ContentResolver.SCHEME_ANDROID_RESOURCE + "://" + r.getResourcePackage ...

  3. delphi编写dll心得， 谢谢原作者的分享。转

    delphi编写dll心得 1.每个函数体(包括exports和非exports函数)后面加 'stdcall;', 以编写出通用的dll2.exports函数后面必须加'export;'(放在'st ...

  4. DLL模块例1：使用.def模块导出函数，规范修饰名称，显示连接调用dll中函数

    以下内容,我看了多篇文章,整合在一起,写的一个例子,关于dll工程的创建,请参考博客里另一篇文章:http://www.cnblogs.com/pingge/articles/3153571.html ...

  5. HDU4436---str2int 后缀树组（12年天津区域赛）

    str2int Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)Total S ...

  6. [LeetCode] 28. Implement strStr() 解题思路

    Implement strStr(). Returns the index of the first occurrence of needle in haystack, or -1 if needle ...

  7. paip.输入法编程---带ord gudin去重复-

    paip.输入法编程---带ord gudin去重复- 作者Attilax ,  EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:http://blog.csdn.n ...

  8. 使用python程序监控云服务器的带宽

    将一些不重要的服务迁移到云服务上,有些下载什么的,为了防止带宽超了,python做了一个监控程序.用python3写的,由于和python2有些区别,特记录下来备查. 代码如下: #this is f ...

  9. hand第四次考核

    使用Spring与Mybatis技术实现下要求: (2分)1,Spring的配置文件名称为ApplicationContext.xml (2分)2,在ApplicationContext.xml中配置 ...

  10. android后台截屏实现(3)--编译screencap

    修改好之后就要编译了,screencap的编译是要在源码环境中进行的. 将修改后的screencap.cpp文件替换源码中的原始文件,然后修改screencap的Android.mk文件,修改后的文件 ...