通过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

<?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;
    }
?>

相关阅读:
js字符串截取函数slice()、substring()、substr()
js获取字符串最后一位方法
支持xhr浏览器:超时设定、加载事件、进度事件
深入理解ajax系列第一篇——XHR对象
MySQL命令行操作
nodejs中mysql用法
大衍数列
牌型种数
加法变乘法
三羊献瑞

原文地址：https://www.cnblogs.com/yshyee/p/3388273.html