需要默认选中时,定义一个变量 var cityId=城市id
下面是js代码
function readxml() {
var XmlDoc = null;
if (window.ActiveXObject) {
XmlDoc = new ActiveXObject("Microsoft.XMLDOM");
XmlDoc.async = false;
XmlDoc.load(path + "/web/common/regions.xml");
browse = "ie";
} else if (document.implementation
&& document.implementation.createDocument) {
xmlDoc = document.implementation.createDocument('', '', null);
xmlDoc.load("regions.xml");
browse = "ff";
} else {
alert('未做与该浏览器的兼容!');
}
var root = XmlDoc.documentElement;
// 获取根节点下面的省节点
var provinces = root.childNodes;
var province = document.getElementByIdx_x_x("province");
var cities = document.getElementByIdx_x_x("regId");
for ( var i = 0; i < provinces.length; i++) {
// 获取省节点的name属性的值
var name = provinces[i].getAttribute("name");
// 创建一个option
var opt = document_createElement_x_x("option");
// 为option添加文本
opt.a(document_createTextNode(name));
// 添加到父节点中
if(cityId!=null&&cityId!=""){
var citys=provinces[i].childNodes;
for(var j=0;j<citys.length;j++){
if(citys[j].getAttribute("id")==cityId){
opt.selected="selected";
for ( var j = 0; j < citys.length; j++) {
// 创建一个option
var opt1 = document_createElement_x_x("option");
opt1.value = citys[j].getAttribute("id");
// 为option添加文本
opt1.a(document_createTextNode(citys[j]
.getAttribute("name")));
// 添加到父节点中
if(citys[j].getAttribute("id")==cityId){
opt1.selected="selected";
}
cities.a(opt1);
}
}
}
}
province.a(opt);
}
province.onchange = function() {
var pce = document.getElementByIdx_x_x("province");
var opts = pce.options;
var opt1 = opts[pce.selectedIndex];
var name = opt1.innerText;
for ( var i = 0; i < provinces.length; i++) {
// 获取省节点的name属性的值
var name1 = provinces[i].getAttribute("name");
if (name == name1) {
cities.length = 1;// 每次改变的时候清空
var pros = provinces[i];
var citys = pros.childNodes;
for ( var j = 0; j < citys.length; j++) {
// 创建一个option
var opt1 = document_createElement_x_x("option");
opt1.value = citys[j].getAttribute("id");
// 为option添加文本
opt1.a(document_createTextNode(citys[j]
.getAttribute("name")));
// 添加到父节点中
cities.a(opt1);
}
}
}
}
}
下面是xml结构
<?xml version="1.0" encoding="utf-8"?>
<regions>
<province name="湖北">
<city id="1" name="武汉" isOpen="1" />
<city id="2" name="黄冈" isOpen="1" />
<city id="19" name="襄樊" isOpen="1" />
<city id="22" name="鄂州" isOpen="0" />
<city id="24" name="黄石" isOpen="1" />
</province>
<province name="重庆">
<city id="23" name="重庆" isOpen="0" />
</province>
</regions>
分享到:
相关推荐
在JavaScript和XML结合使用生成级联下拉框的场景中,我们通常会处理多级选择的交互,这种交互常见于地址选择或者分类筛选等。级联下拉框是指当用户在一个下拉框中做出选择后,另一个下拉框的内容会根据用户的选择...
### js+xml生成级联下拉框代码解析 在网页开发中,级联下拉框是一种常见的用户界面元素,尤其在需要根据某个选择动态更新其他选项的场景中非常有用,例如根据用户选择的省份来显示相应的城市列表。本文将详细介绍...
首先,AJAX(Asynchronous JavaScript and XML)是一种在不刷新整个页面的情况下与服务器交换数据并更新部分网页的技术。在这里,AJAX将用于异步地获取和更新下拉列表的数据,提高用户体验,减少网络传输的开销。 ...
JSON(JavaScript Object Notation)和Select元素在网页开发中经常被用来构建动态的、交互式的用户界面,特别是在处理级联下拉框时。级联下拉框是指一个下拉框的选择会影响另一个下拉框的选项,这样的设计可以提高...
本项目“ajax + servlet 两级动态级联下拉框”旨在演示如何使用AJAX(异步JavaScript和XML)技术和Servlet进行交互,以实现在选择第一个下拉框的值后,第二个下拉框自动更新并显示相关数据。以下是对这个项目的详细...
在IT行业中,PHP和AJAX(Asynchronous JavaScript and XML)是两种非常重要的技术,它们在构建动态、交互式的Web应用程序中发挥着关键作用。XML(eXtensible Markup Language)则是一种数据交换格式,常与AJAX配合...
**Ajax 实现可配置无刷新级联下拉框** 在 Web 开发中,为了提供用户友好的交互体验,级联下拉框(Cascading Dropdown)是一个常见的需求。级联下拉框允许用户在一个下拉框中选择一个选项后,根据所选的选项动态更新...
JavaScript 通过解析 XML 文件来获取这些数据,然后根据需要在页面上动态生成下拉框的选项。 **四级联动** 四级联动指的是四个下拉框之间存在关联,当用户在第一个下拉框选择一个选项后,第二个下拉框的内容会随之...
Ajax(Asynchronous JavaScript and XML,异步JavaScript和XML)是一种在无需重新加载整个页面的情况下,能够更新部分网页的技术。通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着用户...
在JavaScript编程中,省市级联(也称为级联下拉框)是一种常见的用户界面功能,用于展示层次结构的数据,如省份和城市。这种交互方式在网页表单中常见,允许用户选择一个省份后,自动加载并显示该省份下的城市选项。...
其中,`onchange`属性可以添加JavaScript事件,当一级下拉框的值改变时,调用`updateCity`函数更新二级下拉框。 5. **JavaScript处理**:在页面中编写JavaScript代码,监听`onchange`事件,根据选定的一级值,通过...
在本教程"ajax级联forJava"中,我们将探讨如何使用Ajax、JavaScript以及Java来实现级联下拉框的功能。 级联下拉框常用于需要展示关联数据的场景,如国家和城市的选择,当用户选择一个国家后,下拉框会动态更新并...
生成的代码涵盖了前端和后端的多种语言,如HTML、JS、Vue、JAVA、XML等,同时包含了标准功能如增删改查、Excel下载、日志记录等。此外,系统还支持多语言对应,可以适应国际化需求。 代码示例包括查询SQL(Mybatis...
2. **JavaScript处理XML**:在前端,使用JavaScript来解析XML文件并动态地生成下拉菜单。DOM(Document Object Model)接口允许我们查找、遍历和修改XML文档。例如,我们可能使用`XMLHttpRequest`对象加载XML文件,...
当请求成功时,会调用success回调函数,在这里我们可以解析XML并填充第二个级联下拉框。解析XML可以使用jQuery的`$.parseXML()`方法,然后通过`find()`或`children()`等方法遍历节点,如下所示: ```javascript $....
3. **DOM操作**:使用jQuery的DOM(Document Object Model)操作方法,如`next()`, `prev()`, 和 `children()`,来添加、删除和修改下拉框,确保同一页面上多个级联下拉框之间的独立性。 4. **事件处理**:`...
5. **更新下拉框**:根据解析后的JavaScript对象,动态生成第二个下拉框的选项,然后使用DOM操作(如`innerHTML`或`append`)更新下拉框的内容。 6. **显示结果**:用户可以看到第二个下拉框的内容已经根据他们的...
利用JavaScript或jQuery监听第一个下拉框的`onChange`事件,当选项改变时发送异步请求(AJAX)到服务器,获取新的级联数据,并更新第二个下拉框。 6. **异步响应**:Action类需要处理AJAX请求,根据请求参数(如...
这个"**DWRselect(附Ant)**.rar"文件很可能包含一个示例项目,演示了如何使用DWR来创建一个AJAX级联下拉框,其中数据是从XML文件中读取的。在这个场景中,用户在一个下拉框的选择会影响到另一个下拉框的内容,这种...