JS-案例-Select级联选择

最新推荐文章于 2020-12-08 10:38:41 发布

a_worm

最新推荐文章于 2020-12-08 10:38:41 发布

阅读量656

点赞数

分类专栏：技能-前台文章标签： DOM javaScript

本文链接：https://blog.csdn.net/cuigaochong/article/details/48194161

版权

本文介绍了如何使用JavaScript实现Select元素的级联选择效果。当用户在第一个Select中选择一个省后，第二个Select会动态加载并显示对应的市。具体实现涉及DOM操作和XML数据源的使用。

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

需求:当选择了第一个select以后第二个select中出现和第一个select相关的内容；

第一个选择省，选定后第二个select出现相关市；

实现代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<script type="text/javascript">

	window.onload = function()
	{
		//为 #province 添加 onchange 响应函数
		document.getElementById("province").onchange = function()
		{
			//加载 cities.xml 文件. 得到代表给文档的 document 对象
			var xmlDoc = parseXml("cities.xml");
			//var provinces = xmlDoc.getElementsByTagName("province");
			//alert(provinces.length);
			
			//把 #city 节点除第一个子节点外都移除. 
			var cityNode = document.getElementById("city");
			var cityNodeOptions