js或jquery 根据要求解析XML

XML内容<?xmlversion="1.0"encoding="utf-8"?><nameinfo><namelist><nametype="1"><id>1</id>... XML内容
<?xml version="1.0" encoding="utf-8"?>
<nameinfo>
<namelist>
<name type="1">
<id>1</id>
<pname>名称一</pname>
</name>
<name type="1">
<id>2</id>
<pname>名称二</pname>
</name>
<name type="2">
<id>3</id>
<pname>名称三</pname>
</name>
</namelist>
</nameinfo>
HTML内容
<div id="divName">
</div>
请问像上面的xml,怎么样解析成如下图的效果呢因为都不固定内容,所以HTML页面只有一个id,通过js解析xml,都动态添加到'divName'此ID里相同的type下的pname放到一个下拉菜单里,下拉菜单的value值为id不同的type,则单独动态添加下拉菜单谢谢
展开
 我来答
匿名用户
推荐于2016-03-16
展开全部
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset=UTF-8>
    <title>Ajax</title>
    <script>
        function getNewContent() {
            var request = getHTTPObject();
            if (request) {
                // good.xml是你的xml文件, 采纳即可
                request.open("GET", "good.xml", true);
                request.onreadystatechange = function() {
                    if (request.readyState == 4) {
                        var div = document.getElementById('divName');
                        var xml = request.responseXML;
                        var list = xml.getElementsByTagName("namelist")[0];
                        var nodes = list.getElementsByTagName("name");
                        var types = {};
                        for (var i = 0; i < nodes.length; i++) {
                            var node = nodes[i],
                                tp = node.getAttribute("type");
                            var cc = node.children;
                            if (types[tp]) {
                                var option = document.createElement("option");
                                var sel = document.getElementById("sel" + tp);
                                option.value = cc[0].firstChild.nodeValue;
                                option.innerHTML = cc[1].firstChild.nodeValue;
                                sel.appendChild(option);
                            } else {
                                var sel = document.createElement("select");
                                sel.id = types[tp] = "sel" + tp;
                                var option = document.createElement("option");
                                option.value = cc[0].firstChild.nodeValue;
                                option.innerHTML = cc[1].firstChild.nodeValue;
                                sel.appendChild(option);
                                var n = document.createTextNode("分类" + tp + ": ");
                                div.appendChild(n);
                                div.appendChild(sel);
                                var br = document.createElement("br");
                                div.appendChild(br);
                            }
                        }
                    }
                };
                request.send(null);
            } else {
                alert("Sorry,your browser doesn't support XMLHttpRequest");
            }
        }
        onload = getNewContent;

        function getHTTPObject() {
            if (typeof XMLHttpRequest == "undefined") {
                XMLHttpRequest = function() {
                    try {
                        return new ActiveXObject("Msxml2.XMLHTTP.6.0");
                    } catch (e) {
                        console.error(e);
                    }
                    try {
                        return new ActiveXObject("Msxml2.XMLHTTP.3.0");
                    } catch (e) {
                        console.error(e);
                    }
                    try {
                        return new ActiveXObject("Msxml2.XMLHTTP");
                    } catch (e) {
                        console.error(e);
                    }
                    return false;
                }
            }
            return new XMLHttpRequest();
        }
    </script>
</head>

<body>
    <div id="divName"></div>
</body>

</html>
追问
你好,能麻烦帮我用jquery写一下吗,上面的原生js是可以,但是我用jquer总是出错,谢谢麻烦了
追答
正所谓你用jquery总出错,所以更要使用原生的js就好,

我的回答很符合你的最初题意,请采纳即可!!!
TableDI
2024-07-18 广告
VLOOKUP是Excel中用于垂直查找的函数,其基本用法包括四个参数:1. 查找值:即在数据表首列中需要搜索的值。2. 数据表:包含查找值的单元格区域或数组。3. 返回值所在列数:指定返回查询区域中第几列的值。4. 查找方式:选择精确匹配... 点击进入详情页
本回答由TableDI提供
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式