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,则单独动态添加下拉菜单谢谢 展开
<?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,则单独动态添加下拉菜单谢谢 展开
1个回答
推荐于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 广告
2024-07-18 广告
VLOOKUP是Excel中用于垂直查找的函数,其基本用法包括四个参数:1. 查找值:即在数据表首列中需要搜索的值。2. 数据表:包含查找值的单元格区域或数组。3. 返回值所在列数:指定返回查询区域中第几列的值。4. 查找方式:选择精确匹配...
点击进入详情页
本回答由TableDI提供
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询