通过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>
                        &nbsp;
                  <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>
                        &nbsp;
                      <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文件模式下却是可以正常运行的,不知道故障出现在什么地方,盼请高手指教,小弟不胜感激!

解决方案 »

  1.   

    楼主我的资源中有现成的三级联动菜单,全国各省市县,你可以看看,
    Object Required是因为你调用的时候没有对象xmlDoc.documentElement.childNodes有问题,你可以查一下到底是
    xmlDoc没有定义还是xmlDoc.documentElement.childNodes的问题
      

  2.   

    谢谢楼主,不过我应该如何判断xmlDoc是否定义以及xmlDoc.documentElement.childNodes的取值问题呢?求教!
      

  3.   

    看看下面哪个为null
    alert(xmlDoc);
    alert(xmlDoc.documentElement);
    alert(xmlDoc.documentElement.childNodes);
    var provinceNodes = xmlDoc.documentElement.childNodes;
      

  4.   

    测试了一下,都不是null,不过发现一个奇怪的问题,我在alert这些变量之后,然后那个JS的错误提示就没有了?而且下拉框也能显示出值了,奇怪。
      

  5.   

    但是把那些alert给注释掉之后,就又出现同样的错误了……
      

  6.   

    var dropElement2=document.getElementById("Select2"); 
    var dropElement3=document.getElementById("Select3");
    改成
    var dropElement2=document.getElementById("Select2").options;
    var dropElement3=document.getElementById("Select3").options;
      

  7.   

    function LoadXML()
    {
        var xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); 
        //xmlDoc.async = true;
        //xmlDoc.async = false;//改为同步的,应该是你异步加载时xml还未加载完成
        xmlDoc.load("Area.xml");
        return xmlDoc;
        
    }