Jquery+ajax+xml制作二级联动菜单

最新推荐文章于 2025-08-22 11:32:18 发布

转载最新推荐文章于 2025-08-22 11:32:18 发布 · 102 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/arorn/archive/2009/04/01/1427201.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用XML文件存储数据，并通过AJAX技术实现动态加载城市列表到网页下拉菜单的方法。该方案利用JavaScript处理XML数据，根据用户选择的省份自动更新对应的市级选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

city.xml

Code
<?xml version="1.0" encoding="utf-8" ?>
<root>
<list>
    <id>1</id>
    <name>上海</name>
</list>
<list>
    <id?2</id>
    <name>北京</name>
</list>
</root>

index.asp

Code
<html>
<select name="add1" id="add1" onChange="smt_Select(this.value)">
<option value="" selected>请选择省</option>
<%
sql="select * from address order by id desc"
Set rs=Conn.Execute(sql)
while not rs.eof%>
<option value="<%=rs("id")%>"><%=rs("name")%></option>
<%rs.movenext
wend
rs.Close()
Set rs=Nothing
%>
</select>
<select name="add2" id="add2">
<option selected value="">请选择市</option>
</select>
</html>

Code
<script type="text/javascript" src="/js/jquery-1.3.1.js"></script>
<script>
function smt_Select(obj){
$.ajax(
     {
     type:"post",
     url:"xml.asp",
     datatype:"xml",
     data:"type="+ntype+"&scaid="+obj+"&sid="+Math.random(),
     success:function(xml)
     {
         document.getElementById("add2").length=0;
          $(xml).find("root > list").each(
            function(i){
             var id=$(this).find("id").text();
             var name=$(this).find("name").text();
            document.getElementById("add2").options[i]=new Option(name,id);
            }
         )
     }
     });
}

</script>

转载于:https://www.cnblogs.com/arorn/archive/2009/04/01/1427201.html