js+xml生成級聯(lián)下拉框代碼

更新時間：2012年07月24日 00:39:56 作者：

js+xml生成級聯(lián)下拉框代碼，需要的朋友可以參考下

需要默認選中時，定義一個變量 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; 
// 獲取根節(jié)點下面的省節(jié)點 
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++) { 
// 獲取省節(jié)點的name屬性的值 
var name = provinces[i].getAttribute("name"); 
// 創(chuàng)建一個option 
var opt = document_createElement_x_x("option"); 
// 為option添加文本 
opt.a(document_createTextNode(name)); 
// 添加到父節(jié)點中 
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++) { 
// 創(chuàng)建一個option 
var opt1 = document_createElement_x_x("option"); 
opt1.value = citys[j].getAttribute("id"); 
// 為option添加文本 
opt1.a(document_createTextNode(citys[j] 
.getAttribute("name"))); 
// 添加到父節(jié)點中 
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++) { 
// 獲取省節(jié)點的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++) { 
// 創(chuàng)建一個option 
var opt1 = document_createElement_x_x("option"); 
opt1.value = citys[j].getAttribute("id"); 
// 為option添加文本 
opt1.a(document_createTextNode(citys[j] 
.getAttribute("name"))); 
// 添加到父節(jié)點中 
cities.a(opt1); 
} 
} 
} 
} 
} 

下面是xml結(jié)構(gòu)

復(fù)制代碼代碼如下:

 
<?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> 

您可能感興趣的文章: