ajax + asp 实现级联选择

最新推荐文章于 2019-06-25 22:40:43 发布

weixin_30869099

最新推荐文章于 2019-06-25 22:40:43 发布

阅读量68

点赞数

文章标签：人工智能 javascript ViewUI

原文链接：http://www.cnblogs.com/jarod99/archive/2009/02/28/1400410.html

版权

一个困扰很久的问题，终于解决了，虽然不是很完美。。。但是确实实现了级联！

图片：

HTML 代码
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
  <title>级联选择</title>
</head>
<script type="text/javascript">
        function loadClass(f){
            var req = getHttpRequest();
            var c1 = document.getElementById("class1");
            var c2 = document.getElementById("class2");
            var c   = document.getElementById("content");
            var result;
            var pid=0;

            //f 一个标识符，区别 class2 的选择动作
            if (f)    { pid = c1.options[c1.selectedIndex].value; }

            var url = "checkName.asp?pid="+pid;

            req.onreadystatechange = function()
            {    //回调函数

                if (4==req.readyState)
                {
                    //使用 eval 方法自动将获取到的数据转换为一个 javascript 数组（unescape 解码asp中的编码）
                    result = eval("(" + unescape(req.responseText) + ")");

                        //载入一级分类
                        if (pid!=0)
                        {
                            c2.options.length=1;//添加二级分类前先清空列表内容
                            for (var i=0;i<result.length-1 ;i+=2 )
                                c2.options[c2.options.length]= new Option(result[i+1],result[i]);
                        }
                        else
                        {
                            if (c1.options.length<=1)
                                for (var i = 0;i<result.length-1 ;i=i+2 )
                                    c1.options[c1.options.length] = new Option(result[i+1],result[i]);
                        }
                }
            }

            req.open("post",url,true);
            req.send(null);
        }

        //选择二级分类时，将选择的名称插入 div 中
        function s(){
            var c2=document.getElementById('class2');
            var info=c2.options[c2.selectedIndex].text;
            document.all["content"].innerHTML = info;
        }

        //兼容个浏览器，返回 httprequest  对象
        function getHttpRequest()
        {
            var  xmlreq = false;
            if (window.XMLHttpRequest)
            {
                xmlreq  =  new XMLHttpRequest();
            }
            else
                if (window.ActiveXObject)
                {
                try
                {
                    xmlreq   = new ActiveXObject( "Msxml2.XMLHTTP ");
                }
                catch(e1)
                {
                    try
                    {
                        xmlreq = new ActiveXObject( "Microsoft.XMLHTTP ");
                    }
                    catch(e2)
                    {}
                }
            }
            return xmlreq;
        }
</script>
<body onload="loadClass()">
    大类：
    <select id="class1" style="font-size:12px;width:150px;" onchange="loadClass(1)">
        <option value="">请选择</option>
    </select>
    <br><br>
    小类：
    <select id="class2" style="font-size:12px;width:150px;" onchange="s()">
        <option value="">请选择</option>
    </select>

        <div id="content" style="border:dotted 1px #888;width:400px;height:300px;font:12px tahoma;"></div>
</body>
</html>

ASP 源码
<%
        pid=request("pid")

        Set conn = Server.CreateObject("Adodb.Connection")
        conn.open "Provider=microsoft.jet.oledb.4.0;data source=" + server.MapPath("db.mdb")

        Set rs = server.CreateObject("Adodb.RecordSet")
        sqlstr = "select * from menu where pid=" + pid

        rs.open sqlstr,conn,1,1

        If rs.eof Then
            response.write "none"
        Else
                response.write("[")
                While Not rs.eof
                    response.write rs("mid")
                    response.write ","
                    response.write "'" & escape(rs("mName")) & "'"     '防止乱码使用 escape
                    response.write ","
                    rs.movenext
                Wend
                '随便插入一个值，防止 , 结尾
                response.write("0]")
        End If

        rs.close
        Set rs = Nothing
        conn.close
        Set conn = Nothing

%>

转载于:https://www.cnblogs.com/jarod99/archive/2009/02/28/1400410.html

weixin_30869099

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax + asp 实现级联选择

一个困扰很久的问题，终于解决了，虽然不是很完美。。。但是确实实现了级联！图片：HTML 代码<!doctypehtmlpublic"-//w3c//dtdhtml4.0transitional//en"><html><head><title>级联选择</title></head><sc...
复制链接

扫一扫