利用js读出xml制作地区联动下拉框
时间：2010-08-29 来源：szyicol
<script language="javascript">
function LoadXML()
{
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = true;(此处要注意，我在asp.net中时，需要写成false才行，难道真TMD C#比较慢的原因？)
xmlDoc.load("XML\\Area.xml");
return xmlDoc;
}
function InitArea()
{
/*获取，引用三个下拉框 */
var dropElement1=document.getElementById("Select1");
var dropElement2=document.getElementById("Select2");
var dropElement3=document.getElementById("Select3");
/*自定义一个方法 把传进来的对象清除 这里清除了三个下拉所有框的选项*/
RemoveDropDownList(dropElement1);
RemoveDropDownList(dropElement2);
RemoveDropDownList(dropElement3);
var pOption = document.createElement("option");
pOption.value = "0";
pOption.text = "全国";
dropElement1.add(pOption);
var cOption = document.createElement("option");
cOption.value = "0";
cOption.text = "全部市";
dropElement2.add(cOption);
var aOption = document.createElement("option");
aOption.value = "0";
aOption.text = "全区县";
dropElement3.add(aOption);
var xmlDoc= LoadXML();
//var provinceNodes = xmlDoc.documentElement.childNodes[1].getAttribute("name");
/*获取全市节点*/
var provinceNodes = xmlDoc.documentElement.childNodes;
//var TopnodeList=xmlDoc.selectSingleNode("Root").childNodes;
//j = provinceNodes.length;
//alert(j)
if(provinceNodes.length > 0) //provinceNodes.length = 31
{
var province;
var city;
var area;
for(var i=0; i<provinceNodes.length; i++)
{
province = provinceNodes[i];
var pOption = document.createElement("option");
pOption.value = province.getAttribute("name");
pOption.text = province.getAttribute("name");
dropElement1.add(pOption);
}
}
}
function selectProvince()
{
var dropElement1=document.getElementById("Select1");
var provinceName=dropElement1.options[dropElement1.selectedIndex].text;
var xmlDoc= LoadXML();
var provinceNode = xmlDoc.selectSingleNode("//root/province[@name='"+provinceName+"']"); //alert(provinceNode.getAttribute("name"));
/*XmlNode node = doc.SelectSingleNode("//AllNode/Node[@ID = ’aaa’]");
在整个Xml中查找AllNode节点下的节点名为Node的节点，该子节点的ID属性值为aaa*/
var dropElement2=document.getElementById("Select2");
var dropElement3=document.getElementById("Select3");
RemoveDropDownList(dropElement2);
RemoveDropDownList(dropElement3);
var cOption = document.createElement("option");
cOption.value = "0";
cOption.text = "全部市";
dropElement2.add(cOption);
var aOption = document.createElement("option");
aOption.value = "0";
aOption.text = "全区县";
dropElement3.add(aOption);
if (provinceNode==null)
{
return;
}
for(var i=0; i<provinceNode.childNodes.length; i++)
{
city = provinceNode.childNodes[i];
var cOption = document.createElement("option");
cOption.value = city.getAttribute("name");
cOption.text = city.getAttribute("name");
dropElement2.add(cOption);
}
}
function selectArea()
{
var dropElement2=document.getElementById("Select2");
var cityName=dropElement2.options[dropElement2.selectedIndex].text;
var xmlDoc= LoadXML();
var cityNode = xmlDoc.selectSingleNode("//root/province/city[@name='"+cityName+"']");
var dropElement3=document.getElementById("Select3");
RemoveDropDownList(dropElement3);
var aOption = document.createElement("option");
aOption.value = "0";
aOption.text = "全区县";
dropElement3.add(aOption);
if (cityNode==null)
{
return;
}
for(var i=0; i<cityNode.childNodes.length; i++)
{
city = cityNode.childNodes[i];
var aOption = document.createElement("option");
aOption.value = city.getAttribute("name");
aOption.text = city.getAttribute("name");
dropElement3.add(aOption);
}
}
function RemoveDropDownList(obj)
{
if(obj)//如果参数obj不为空 则
{
var length=obj.options.length;
if(length > 0)
{
for(var i=length; i>=0;i--)
{
obj.remove(i);
}
}
}
}
window.onload=InitArea;
</script>
/Files/szyicol/searchArea.rar
相关阅读 更多 +
