手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >js+xml生成级联下拉框代码
js+xml生成级联下拉框代码
摘要:需要默认选中时,定义一个变量varcityId=城市id下面是js代码复制代码代码如下:functionreadxml(){varXmlDo...

需要默认选中时,定义一个变量 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>

【js+xml生成级联下拉框代码】相关文章:

js实现异步循环实现代码

将HTML自动转为JS代码

超酷右下浮出广告窗口代码

一些有关检查数据的JS代码

网页里控制图片大小的相关代码

实现无刷新联动例子汇总

javascript生成不重复的随机数

JavaScript实现Iterator模式实例分析

基于jquery实现下拉框美化特效

jQuery+ajax实现无刷新级联菜单示例

精品推荐
分类导航