本人在使用xpath在jsp页面中进行三级联动操作时,页面可以出现三级联动效果,但是select标签内的value是option的value也就是地区的号码。这使我在之后的对数据库的插入操作造成了很大影响!!!插入的都是数字,并不是地名的中文格式。经过多方查找和测验。解决了这一问题。下面是问题代码和解决方案。
使用语言:Java。 IDE:idea。 框架:springMVC
xml部分代码
<?xml version="1.0" encoding="utf-8"?>
<area country="china">
<province id="1" value="110000" name="北京市">
<city value="110100" name="市辖区">
<piecearea value="110101" name="东城区"/>
<piecearea value="110102" name="西城区"/>
</city>
</province>
</area>
三级联动
var xmlDoc = null;
window.onload = init;
function init() {
initDoc();
var pushP = document.getElementById("pushP");
var pushC = document.getElementById("pushC");
var pushD = document.getElementById("pushD");
var oP = document.getElementById("province");
oP.onchange = function() {
intiX("city", "/area/province[@value='" + this.value + "']/city");
document.getElementById("district").options.length = 1;
pushP.value = oP.options[oP.selectedIndex].text;//主要语句
};
var oC = document.getElementById("city");
oC.onchange = function() {
intiX("district", "//city[@value='" + this.value + "']/piecearea");
pushC.value = oC.options[oC.selectedIndex].text;//主要语句
};
var oD = document.getElementById("district");
oD.onchange = function() {
pushD.value = oD.options[oD.selectedIndex].text;//主要语句
}
}
function initDoc() {
var xhr = create();
xhr.open("GET", "resources/area1.xml", true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
xmlDoc = xhr.responseXML;
intiX("province", "/area/province");
}
};
xhr.send();
}
function intiX(id, path) {
var nodes = getNodes(path);
insert(id, nodes);
}
function insert(id, nodes) {
var content = document.getElementById(id);
content.options.length = 1;
for (var i = 0; i < nodes.length; i++) {
var node = document.createElement("option");
node.text = nodes[i].getAttribute("name");
node.value = nodes[i].getAttribute("value");
content.add(node);
}
}
function getNodes(path) {
var nodes = Array();
var ljk = xmlDoc.evaluate(path, xmlDoc, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);
var n;
while((n = ljk.iterateNext())) {
nodes.push(n);
}
return nodes;
}
function create() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else if (window.ActiveXObject) {
return new ActiveXObject("Mircosoft.XMLHTTP");
} else {
alert("no");
}
}
jsp页面
<div>
<h2 class="sj">收货地址:</h2>
<input type="hidden" id="pushP" value="" name="province"/>
<input type="hidden" id="pushC" value="" name="city"/>
<input type="hidden" id="pushD" value="" name="district"/>
<select id="province">
<option value="">-请输入省份-</option>
</select>
<select id="city">
<option value="">-请输入城市-</option>
</select>
<select id="district">
<option value="">-请输入地区-</option>
</select>
</div>