朋友让我写了一个用js和xml的级联 修改时显示已经选择的城市。做了一个指定参数的级联。页面js如下 ：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<title>New Web Project</title>
<script type="text/javascript" src="js/PCA_modify.js">
</script>
<script language="JavaScript">
function AddProvince1(pid, cid, aid){
xmldoc = new ActiveXObject("microsoft.XMLDOM");
xmldoc.async = false;
xmldoc.load("js/PCAXml.xml");
var ProvinceNodes = xmldoc.documentElement.selectNodes("Province");//documentElement可以返回文档的根节点
for (var i = 0; i < ProvinceNodes.length; i++) {//循环所有的省
document.getElementById("province").options.add(new Option(ProvinceNodes[i].getAttribute("name"), ProvinceNodes[i].getAttribute("id")));
if (ProvinceNodes[i].getAttribute("id") == pid) {//选中已经选定的省
document.getElementById("province").options[i].selected = true;
};
};
var CityNodes = xmldoc.documentElement.selectNodes("Province[@id='" + pid + "']/City"); //获得已经选定省份下的所有市
for (var i = 0; i < CityNodes.length; i++) {
document.getElementById("city").options.add(new Option(CityNodes[i].getAttribute("name"), CityNodes[i].getAttribute("id")));
if (CityNodes[i].getAttribute("id") == cid) {//选中已经选定的市
document.getElementById("city").options[i].selected = true;
};
};
var AreaNodes = xmldoc.documentElement.selectNodes("Province/City[@id='" + cid + "']/Area");
alert(AreaNodes.length);
for (var i = 0; i < AreaNodes.length; i++) {
document.getElementById("area").options.add(new Option(AreaNodes[i].text, AreaNodes[i].getAttribute("id")));
if (AreaNodes[i].getAttribute("id") == aid) {//选中已经选定的区
document.getElementById("area").options[i].selected = true;
};
};
};
</script>
</head>
<body onload="AddProvince1('03','0302','030204');">
省
<select id="province" name="province" class="text70" onclick="AddCity(this.value)">
</select>
<br>
市
<select id="city" name="city" class="text70" onclick="AddArea(this.value)">
</select>
<br>
区
<select id="area" class="text40" name="area">
</select>
<br>
</body>
</html>
分享到：
相关推荐
以上代码展示了如何使用JavaScript读取XML文件并动态生成级联下拉框，同时处理了默认选中项的问题。在实际项目中，你可能需要根据具体需求调整代码，例如添加错误处理、优化性能或增加更多交互效果。此外，现代前端...
2. **解析XML**：使用JavaScript的DOM API读取和解析XML文件，将其转换为JavaScript对象。 3. **构建HTML结构**：根据解析出的数据，利用JavaScript动态创建HTML元素，构建菜单的DOM结构。这可能涉及创建`<ul>`和`...
2. **JavaScript处理逻辑**：用于读取XML数据并动态更新下拉框。 3. **DOM操作**：用于添加或修改HTML元素（如option）。 #### 三、XML数据结构 首先，我们需要准备一个XML文件来存储省份及其对应的城市信息。这里...
在本案例中，我们讨论的是使用JavaScript和HTML技术实现的级联菜单，且该菜单能够与数据库进行交互，动态地从数据库中读取内容。这种功能可以提升用户体验，使用户能够快速浏览和选择多层分类的信息。 首先，我们要...
例如，使用JavaScript的DOMParser或jQuery的`$.ajax()`方法可以读取XML文件并转化为DOM对象。 3. **创建下拉框**：根据解析到的数据，动态创建HTML的`<select>`元素。一级下拉框的选择应触发二级下拉框的更新，二级...
3. **AJAX异步通信**：为了在用户选择省份时动态更新城市列表，我们可以使用AJAX（Asynchronous JavaScript and XML）技术。这允许我们在不刷新页面的情况下与服务器交换数据和更新部分网页内容。 4. **Dreamweaver...
本主题将深入探讨如何创建和读取包含省市县三级级联信息的XML文件。 首先，我们需要理解XML文件的基本结构。XML是一种标记语言，通过标签来描述数据。在省市县三级级联的XML文件中，每个省市县信息可以被封装为一个...
例如，读取XML文档并获取根节点的代码如下： ```javascript var xhr = new XMLHttpRequest(); xhr.open('GET', 'data.xml', true); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr....
JS将读取并解析这个XML文件，获取到所有省市区的信息，然后用于构建和更新下拉菜单。 两种绑定方式指的是如何将数据与界面元素关联起来。一种是通过城市代码绑定，这种情况下，每个省市区都有一个唯一的数字代码，...
由于XML与JS的良好兼容性，我们可以利用JS来读取XML文件，实现动态的数据操作，例如创建省市级联的下拉菜单。下面将详细解释这一过程中的关键知识点。 1. **XML基本概念**： - XML是一种用于标记数据的语言，其...
在实现城市联动功能时，前端可以通过Ajax请求获取json数据，动态渲染出级联的下拉菜单。 其次，csv（Comma-Separated Values）文件是一种通用的、非结构化的数据格式，它用逗号分隔每一项数据，适合于表格数据的...
通过XML，这些数据可以被JS读取并加载到下拉框中。 实现这个功能的过程大致如下： 1. **数据准备**：首先，你需要创建一个XML文件，包含所有省市区的信息。每个省、市、区作为一个节点，并通过特定的属性标识其...
在IT领域，"三级联动"是一种常见的用户界面交互设计，主要应用于下拉选择框或级联菜单中。这种设计通常涉及到三个层次的数据关联，如在本例中的“全球国家，省份，城市”，用户在选择一个国家后，省份的选项会根据所...
在本示例中，我们将探讨如何使用AJAX（Asynchronous JavaScript and XML）技术来实现这种级联效果。 首先，理解AJAX的核心概念至关重要。AJAX是一种在不刷新整个页面的情况下与服务器交换数据并更新部分网页的技术...
3. Servlet接收到请求后，读取XML天气预报文件，使用DOM或SAX解析器找到对应的省份数据。 4. 解析出城市列表，将其转换为JSON或其他格式，然后通过HttpServletResponse响应给前端。 5. 前端接收到响应后，更新城市...
`readXML.jsp`可能是一个处理XML数据的后端页面，它接收Ajax请求，读取存储在服务器上的XML文件（如省市区县的数据），并返回处理后的数据给前端。XML是一种常用的数据交换格式，但在现代Web应用中，JSON因为其简洁...
在JavaScript（JS）编程中，"无刷新省市县邮编级联"是一种常见的前端交互功能，主要用于用户在选择地址时，能够逐级下拉选择省份、城市和县区，而无需每次选择后都重新加载页面。这种技术提升了用户体验，使得网站...