为什么我照人家的例子做的3级联动下拉框不起作用??

lvlay 2006-06-03 05:28:01
我照这个地址的代码做的3级联动下拉菜单不起作用啊,刚学javascript谢谢指教。
下面是远贴内容
现在在网上看到的三级联一般都是连接数据库或,用javascript数组做的三级联动,我觉得数据没这个必要,有点杀鸡有牛刀的感觉,修改不方便。javascript数组对一般初学者来说不是那么容易看得懂,而且修改不方便,xml是一个不错的选择一目睹了然,随便增加删除十分方便!
ProvinceCity.xml
<?xml version="1.0" encoding="utf-8"?>
<Root>
<Province Name="北京市" Id="110000">
<City Name="市辖区" Id="110100">
<Area Name="东城区" Id="110101" />
<Area Name="西城区" Id="110102" />
<Area Name="崇文区" Id="110103" />
<Area Name="宣武区" Id="110104" />
<Area Name="朝阳区" Id="110105" />
<Area Name="丰台区" Id="110106" />
<Area Name="石景山区" Id="110107" />
<Area Name="海淀区" Id="110108" />
<Area Name="门头沟区" Id="110109" />
<Area Name="房山区" Id="110111" />
<Area Name="通州区" Id="110112" />
<Area Name="顺义区" Id="110113" />
<Area Name="昌平区" Id="110114" />
<Area Name="大兴区" Id="110115" />
<Area Name="怀柔区" Id="110116" />
<Area Name="平谷区" Id="110117" />
</City>
<City Name="县" Id="110200">
<Area Name="密云县" Id="110228" />
<Area Name="延庆县" Id="110229" />
</City>
</Province>
<Province Name="天津市" Id="120000">
<City Name="市辖区" Id="120100">
<Area Name="和平区" Id="120101" />
<Area Name="河东区" Id="120102" />
<Area Name="河西区" Id="120103" />
<Area Name="南开区" Id="120104" />
<Area Name="河北区" Id="120105" />
<Area Name="红桥区" Id="120106" />
<Area Name="塘沽区" Id="120107" />
<Area Name="汉沽区" Id="120108" />
<Area Name="大港区" Id="120109" />
<Area Name="东丽区" Id="120110" />
<Area Name="西青区" Id="120111" />
<Area Name="津南区" Id="120112" />
<Area Name="北辰区" Id="120113" />
<Area Name="武清区" Id="120114" />
<Area Name="宝坻区" Id="120115" />
</City>
<City Name="县" Id="120200">
<Area Name="宁河县" Id="120221" />
<Area Name="静海县" Id="120223" />
<Area Name="蓟 县" Id="120225" />
</City>
..........
........
........
</Province>
<Root>
<script language="javascript" type="text/javascript">
var xmlDoc;
var nodeIndex;
function getxmlDoc()
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
var currNode;
xmlDoc.async=false;
xmlDoc.load("ProvinceCity.xml");
if(xmlDoc.parseError.errorCode!=0)
{
var myErr=xmlDoc.parseError;
alert("出错!"+myErr.reason);
}
getProvince1();
}
function getProvince1()
{
var nodeList=xmlDoc.selectSingleNode("Root").childNodes;
var dropElement=document.getElementById("Select1");
for(var i=0; i<nodeList.length; i++)
{
var provinceNode=nodeList[i];
var eOption=document.createElement("option");
eOption.value=provinceNode.getAttribute("Id");
eOption.text=provinceNode.getAttribute("Name");
dropElement.add(eOption);
}
}
function selectCity1()
{
var dropElement=document.getElementById("Select1");
var id=dropElement.options[dropElement.selectedIndex].value;
var provinceNode=xmlDoc.selectSingleNode("//Root/Province[@Id="+id+"]");
var city=document.getElementById("Select2");
var area=document.getElementById("Select3");
RemoveDropDownList(city);
RemoveDropDownList(area);
for(var i=0; i<provinceNode.childNodes.length; i++)
{
var cityNode=provinceNode.childNodes[i];
var eOption=document.createElement("option");
eOption.value=cityNode.getAttribute("Id");
eOption.text=cityNode.getAttribute("Name");
city.add(eOption);
}
}
function selectArea1()
{
var dropElement=document.getElementById("Select2");
var id=dropElement.options[dropElement.selectedIndex].value;
var provinceNode=xmlDoc.selectSingleNode("//Root/Province/City[@Id="+id+"]");
var area=document.getElementById("Select3");
RemoveDropDownList(area);
for(var i=0; i<provinceNode.childNodes.length; i++)
{
var cityNode=provinceNode.childNodes[i];
var eOption=document.createElement("option");
eOption.value=cityNode.getAttribute("Id");
eOption.text=cityNode.getAttribute("Name");
area.add(eOption);
}
}
function RemoveDropDownList(obj)
{
var len=obj.options.length;
//alert(len);
for(var i=len;i>=0;i--)
{
obj.remove(i);
}

}
</script>

下面是我jsp里面的代码
<select name="type" onchange="getxmlDoc();selectCity1();selectArea1();">
<option value="1" selected>北京</option>
<option value="2">天津</option>
<option value="3">上海</option>
</select>
二级分类:
<select name="sub_type1" onchange="selectCity1();selectArea1();">
</select>
三级分类:
<select name="sub_type2" onchange="">
</select>
...全文
167 3 打赏 收藏 转发到动态 举报
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
子牛 2006-06-04
  • 打赏
  • 举报
回复
<select name="type" onchange="javascript:getxmlDoc();selectCity1();selectArea1();">
ruanjiantaotao 2006-06-03
  • 打赏
  • 举报
回复
试试用ajax吧
lvlay 2006-06-03
  • 打赏
  • 举报
回复
我在 getxmlDoc()里一开头就加了alert,根本就没反应
为什么啊
function getxmlDoc()
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
var currNode;
alert("test");
xmlDoc.async=false;
xmlDoc.load("ProvinceCity.xml");
if(xmlDoc.parseError.errorCode!=0)
{
var myErr=xmlDoc.parseError;
alert("出错!"+myErr.reason);
}
getProvince1();
}

81,092

社区成员

发帖
与我相关
我的任务
社区描述
Java Web 开发
社区管理员
  • Web 开发社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧