通过ASPX文件中的JS脚本读取XML中的省市县三级信息:
XML文件部分代码如下:
<root name="中国">
<province name="北京" postcode="beijing" index="1" id="1">
<city name="北京" postcode="100000" index="1">
<area name="北京市" postcode="100000" price="1" index="1"/>
<area name="门头沟区" postcode="102300" index="2"/>
<area name="房山区" postcode="102400" index="3"/>
<area name="顺义区" postcode="101300" index="4"/>
<area name="通州区" postcode="101100" index="5"/>
<area name="昌平区" postcode="102200" index="6"/>
<area name="密云县" postcode="101500" index="7"/>
<area name="延庆县" postcode="102100" index="8"/>
<area name="大兴县" postcode="102600" index="9"/>
<area name="怀柔县" postcode="101400" index="10"/>
<area name="平谷县" postcode="101200" index="11"/>
</city>
</province> <province name="江苏" postcode="nanjing" index="3">
<city name="南京" postcode="210000" index="3">
<area name="南京市" postcode="210000" index="24"/>
<area name="江宁区" postcode="211100" index="25"/>
<area name="溧水县" postcode="211200" index="26"/>
<area name="高淳县" postcode="211300" index="27"/>
<area name="六合县" postcode="211500" index="28"/>
<area name="江浦县" postcode="211800" index="29"/>
</city>
。。然后JavaScript脚本:
<script language="javascript" type="text/javascript">
function LoadXML()
{
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = true;
xmlDoc.load("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);
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);
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;
但是运行到这一句:var provinceNodes = xmlDoc.documentElement.childNodes; 时就会提示“Object Required”,在ASPX文件中对应的控件为: <tr>
<td style="width: 119px; height: 32px;">所在省份</td>
<td style="width: 298px; height: 32px;">
<cc2:TextBox ID="TextBox3" runat="server" CollectSign="ForSave" IsRequired="true" Width="50%">
</cc2:TextBox>
<select id="Select1" name="Select1" onchange="selectProvince();"></select>
</td>
</tr>
<tr>
<td style="width: 119px; height: 32px;">所在地市</td>
<td style="width: 298px; height: 32px;">
<cc2:TextBox ID="TextBox1" runat="server" CollectSign="ForSave" IsRequired="true" Width="50%">
</cc2:TextBox>
<select id="Select2" name="Select2" onchange="selectArea();"></select>
</td>
<td style="width: 118px; height: 32px">所在区县</td>
<td style="height: 32px">
<cc2:TextBox ID="TextBox2" runat="server" CollectSign="ForSave" IsRequired="true" Width="50%">
</cc2:TextBox>
<select id="Select3" name="Select3"></select>
就是对应JS脚本的那三个Select控件,但问题是,这个下载下来的时候,在HTML+XML文件模式下却是可以正常运行的,不知道故障出现在什么地方,盼请高手指教,小弟不胜感激!
XML文件部分代码如下:
<root name="中国">
<province name="北京" postcode="beijing" index="1" id="1">
<city name="北京" postcode="100000" index="1">
<area name="北京市" postcode="100000" price="1" index="1"/>
<area name="门头沟区" postcode="102300" index="2"/>
<area name="房山区" postcode="102400" index="3"/>
<area name="顺义区" postcode="101300" index="4"/>
<area name="通州区" postcode="101100" index="5"/>
<area name="昌平区" postcode="102200" index="6"/>
<area name="密云县" postcode="101500" index="7"/>
<area name="延庆县" postcode="102100" index="8"/>
<area name="大兴县" postcode="102600" index="9"/>
<area name="怀柔县" postcode="101400" index="10"/>
<area name="平谷县" postcode="101200" index="11"/>
</city>
</province> <province name="江苏" postcode="nanjing" index="3">
<city name="南京" postcode="210000" index="3">
<area name="南京市" postcode="210000" index="24"/>
<area name="江宁区" postcode="211100" index="25"/>
<area name="溧水县" postcode="211200" index="26"/>
<area name="高淳县" postcode="211300" index="27"/>
<area name="六合县" postcode="211500" index="28"/>
<area name="江浦县" postcode="211800" index="29"/>
</city>
。。然后JavaScript脚本:
<script language="javascript" type="text/javascript">
function LoadXML()
{
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = true;
xmlDoc.load("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);
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);
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;
但是运行到这一句:var provinceNodes = xmlDoc.documentElement.childNodes; 时就会提示“Object Required”,在ASPX文件中对应的控件为: <tr>
<td style="width: 119px; height: 32px;">所在省份</td>
<td style="width: 298px; height: 32px;">
<cc2:TextBox ID="TextBox3" runat="server" CollectSign="ForSave" IsRequired="true" Width="50%">
</cc2:TextBox>
<select id="Select1" name="Select1" onchange="selectProvince();"></select>
</td>
</tr>
<tr>
<td style="width: 119px; height: 32px;">所在地市</td>
<td style="width: 298px; height: 32px;">
<cc2:TextBox ID="TextBox1" runat="server" CollectSign="ForSave" IsRequired="true" Width="50%">
</cc2:TextBox>
<select id="Select2" name="Select2" onchange="selectArea();"></select>
</td>
<td style="width: 118px; height: 32px">所在区县</td>
<td style="height: 32px">
<cc2:TextBox ID="TextBox2" runat="server" CollectSign="ForSave" IsRequired="true" Width="50%">
</cc2:TextBox>
<select id="Select3" name="Select3"></select>
就是对应JS脚本的那三个Select控件,但问题是,这个下载下来的时候,在HTML+XML文件模式下却是可以正常运行的,不知道故障出现在什么地方,盼请高手指教,小弟不胜感激!
Object Required是因为你调用的时候没有对象xmlDoc.documentElement.childNodes有问题,你可以查一下到底是
xmlDoc没有定义还是xmlDoc.documentElement.childNodes的问题
alert(xmlDoc);
alert(xmlDoc.documentElement);
alert(xmlDoc.documentElement.childNodes);
var provinceNodes = xmlDoc.documentElement.childNodes;
var dropElement3=document.getElementById("Select3");
改成
var dropElement2=document.getElementById("Select2").options;
var dropElement3=document.getElementById("Select3").options;
{
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
//xmlDoc.async = true;
//xmlDoc.async = false;//改为同步的,应该是你异步加载时xml还未加载完成
xmlDoc.load("Area.xml");
return xmlDoc;
}