制作联动下拉框

最新推荐文章于 2019-02-01 12:56:04 发布

狮子和猿

最新推荐文章于 2019-02-01 12:56:04 发布

阅读量647

点赞数

分类专栏： # Web开发文章标签： mozilla encoding opera null action function

本文链接：https://blog.csdn.net/cscj2010/article/details/7417961

版权

Web开发专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文介绍了一个使用XML和JavaScript实现的动态下拉菜单案例。该案例通过解析XML文件中的省份和城市数据，实现了省份和对应城市的联动选择效果。具体而言，当用户在省份下拉菜单中选择一个省份时，右侧的城市下拉菜单会根据所选省份更新显示相应的城市列表。

摘要由CSDN通过智能技术生成

<html>
<head>
<title>liandong menu</title>
<script type="text/javascript" src="loadxmldoc.js"></script>
</head>
<script>
var root;
function selectProvice()
{
	var source;
	var sourceName = "citys.xml";
	var source=loadXMLDoc(sourceName);
	root=source.documentElement;//设置文档元素为根节点元素
	nodes=root.selectNodes("//@name");//搜索属性中含有name的所有结点
	for(var i=0;i<nodes.length;++i)
	{
		var oOption=document.createElement('OPTION');
		oOption.text= ' ' +nodes[i].text+" ";
		oOption.value=nodes[i].text;
		form1.selProvice.options.add(oOption);//add????????????????????
	}
	selectCity();
}
function selectCity()
{
	//在selCity中删除
	for(var i=form1.selCity.options.length-1;i>=0;--i)
	{
		form1.selCity.options.remove(i);
	}
	x=form1.selProvice.selectedIndex;//读取省份下拉框的当前选项
	
	y=form1.selProvice.options[x].value;
	//搜索name属性值等于参数结点下的所有结点
	nodes=root.selectNodes("//province[@name='"+y+"']/city");
	for(var i=0;i<nodes.length;++i)//增加城市名称到下拉列表中
	{
		var oOption=document.createElement("OPTION");
		oOption.text=" "+nodes[i].text+" ";
		oOption.value=nodes[i].text;
		form1.selCity.options.add(oOption);
	}
}
</script>
<body οnlοad="selectProvice();">
<form action=""  method="post" id="form1" name="form1">
	<select name="selProvice" id="selProvice" οnchange="selectCity();">
    </select>
    <select name="selCity" id="selCity">
    </select>
</form>

</body>
</html>

citys.xml

<?xml version="1.0" encoding="gb2312" ?>
<china>
	<province id="1" name="beijng">
	<city>xichengqu</city>
	<city>dongchengqu</city>
	<city>chaoyangqu</city>
	<city>fengtaiqu</city>
	</province>
	
	<province id="2" name="hubei">
	<city>wuhan</city>
	<city>jingzhou</city>
	<city>xiaogan</city>
	<city>xiantao</city>
	</province>
	
	<province id="3" name="fujian">
	<city>fuzhou</city>
	<city>xiamen</city>
	</province>
	
	<province id="4" name="gansu">
	<city>lanzhou</city>
	</province>
	
	
	<province id="5" name="guangdong">
	<city>guanghzhou</city>
	<city>shenzhen</city>
	<city>dongguan</city>
	<city>huizhou</city>
	</province>
</china>

loadxmldoc.js

function loadXMLDoc(dname) 
{
try //Internet Explorer
  {
  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
  }
catch(e)
  {
  try //Firefox, Mozilla, Opera, etc.
    {
    xmlDoc=document.implementation.createDocument("","",null);
    }
  catch(e) {alert(e.message)}
  }
try 
  {
  xmlDoc.async=false;
  xmlDoc.load(dname);
  return(xmlDoc);
  }
catch(e) {alert(e.message)}
return(null);
}