首页 新闻 论坛 群组 Blog 文档 下载 读书 Tag 网摘 搜索 .NET Java 游戏 视频 人才 外包 培训 数据库 书店 程序员
中国软件网
欢迎您:游客 | 登录 注册 帮助
  • 求一个省市的AJAX的级联菜单 [已结贴,结贴人:ykksqq520]
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • ykksqq520
    • 等级:
    • 可用分等级:
    • 总技术专家分:
    • 总技术专家分排名:
    • 揭帖率:
    发表于:2007-12-17 13:14:51 楼主
    要简单易懂,asp.net的
    50  修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • xiaolei1982
    • 等级:
    • 可用分等级:
    • 总技术专家分:
    • 总技术专家分排名:
    • 2

    发表于:2007-12-17 13:22:051楼 得分:20
    http://www.51aspx.com/CV/ProvinceCityArea/
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • feifan2002
    • 等级:
    • 可用分等级:
    • 总技术专家分:
    • 总技术专家分排名:
    发表于:2007-12-17 15:02:452楼 得分:10
    在省的下拉框的onchange事件中调用Change_Select()函数,其中Change_Select的解析地址即你后台根据你的省ID号获获得市一级列表的值,parseMessage为回调时为市ID赋值的函数:
    JScript code
    function Change_Select() { var zhi=document.getElementById('省ID号').value; var url="解析地址&id="+escape(zhi); if(window.XMLHttpRequest) { req=new XMLHttpRequest(); }else if(window.ActiveXObject) { req=new ActiveXObject("Microsoft.XMLHTTP"); } if(req) { req.open("GET",url,true); req.onreadystatechange=callback; req.send(null); } } function callback() { if(req.readyState == 4) { if(req.status == 200) { parseMessage(); }else{ //alert("不存在对应值"); } } } function parseMessage() { var xmlDoc=req.responseXML.documentElement; // alert(xmlDoc); var xSel=xmlDoc.getElementsByTagName('select'); var select_root=document.getElementById('市id号'); select_root.options.length=0; for(var i=0;i<xSel.length;i++) { var xValue=xSel[i].childNodes[0].firstChild.nodeValue; var xText=xSel[i].childNodes[1].firstChild.nodeValue; var option=new Option(xText,xValue); try{ select_root.add(option); }catch(e){ } } }
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • changke18
    • 等级:
    • 可用分等级:
    • 总技术专家分:
    • 总技术专家分排名:
    发表于:2007-12-17 15:44:483楼 得分:0
    <html>
    <head>
    <script>
    var xmlHttp;
    function createXMLHttpRequest()
    {
        if(window.ActiveXObject)
        {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        else if(window.XMLHttpRequest)
        {
            xmlHttp = new XMLHttpRequest();
        }
    }
    function startRequest(province)
    {
        createXMLHttpRequest();
        try
        {
            xmlHttp.onreadystatechange = function(){handleStateChange(province);}
            xmlHttp.open("GET", "data.xml", true);
            xmlHttp.send(null);
        }
        catch(exception)
        {
            alert("xmlHttp Fail");
        }
    }
    function handleStateChange(province)
    {
        if(xmlHttp.readyState == 4)
        {
            if (xmlHttp.status == 200 || xmlHttp.status == 0)
            {
                var root= xmlHttp.responseXML.documentElement;
                try
                {
                    var citySelect=document.getElementById("city");
                    citySelect.options.length=0;
                    var province=root.getElementsByTagName(province)[0];
                    var citys=province.getElementsByTagName("city");
                    for(var i=0; i <citys.length; i++)
                    {
                        var city=citys[i];
                        var cityName=city.getElementsByTagName("name")[0].firstChild.nodeValue;
                        var cityValue=city.getElementsByTagName("id")[0].firstChild.nodeValue;
                        var option=new Option(cityName, cityValue);
                        citySelect.options.add(option);
                    }
                }
                catch(exception)
                {
                    alert("The node is not exist");
                }
            }
        }
    }
    function DisplayCity(province)
    {
        if(province == "")
        {
            var citySelect=document.getElementById("city");
            citySelect.options.length=0;
            return;
        }
        else
        {
            startRequest(province);
        }
    }
    </script>
    </head>
    <body onload="startRequest('Shanxi');">
    <select id= "province" onchange="DisplayCity(this.options[this.selectedIndex].text);" align="center" style="width:100px">
    <option value="0"> </option>
    <option value="1" selected="selected">Shanxi </option>
    <option value="2">Guangdong </option>
    </select>
    <br>
    <select id= "city" align="center" style="width:100px">
    </select>
    </body>
    </html>

    xml:
    <?xml version="1.0" encoding="GB2312"?>
    <root>
      <Shanxi>
        <city>
            <name>Xian </name>
            <id>1 </id>
        </city>
        <city>
            <name>Xianyang </name>
            <id>2 </id>
        </city>
        <city>
            <name>Baoji </name>
            <id>3 </id>
        </city>
        <city>
            <name>Weinan </name>
            <id>4 </id>
        </city>
        <city>
            <name>Hanzhong </name>
            <id>5 </id>
        </city>
      </Shanxi>
      <Guangdong>
        <city>
            <name>Shenzhen </name>
            <id>1 </id>
        </city>
        <city>
            <name>Dongguan </name>
            <id>2 </id>
        </city>
        <city>
            <name>Zhongshan </name>
            <id>3 </id>
        </city>
        <city>
            <name>Huizhou </name>
            <id>4 </id>
        </city>
        <city>
            <name>Foshan </name>
            <id>5 </id>
        </city>
      </Guangdong>
    </root>
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • yigui2001
    • 等级:
    • 可用分等级:
    • 总技术专家分:
    • 总技术专家分排名:
    发表于:2007-12-18 16:18:534楼 得分:0
    学习中~~~~
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • chenguang79
    • 等级:
    • 可用分等级:
    • 总技术专家分:
    • 总技术专家分排名:
    发表于:2007-12-18 16:56:385楼 得分:20
    http://www.cnblogs.com/chen79/archive/2007/12/09/988509.html
    这是我前几天用的一个,感觉还是很简单。你可以看一下
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • loveyt
    • 等级:
    • 可用分等级:
    • 总技术专家分:
    • 总技术专家分排名:
    发表于:2007-12-18 17:53:566楼 得分:0
    省市还要用Ajax啊?有点大炮打小鸟了吧......
    省市是相对固定的啊,写死在JS数组里不可以吗?
    修改 删除 举报 引用 回复

    网站简介广告服务网站地图帮助联系方式诚聘英才English 问题报告
    北京创新乐知广告有限公司 版权所有 京 ICP 证 070598 号
    世纪乐知(北京)网络技术有限公司 提供技术支持
    Copyright © 2000-2008, CSDN.NET, All Rights Reserved