代码就真的不怎么样,看了都不太爽,之后再改掉.转贴请注明原著,谢谢.
ajax比较省系统资源.因为这样总比反复的DB request好得多.先顶着了.
本来这个还有个和web-service,但出于个人原因,就只放出读取XML的例子
xml 部分:
<?xml version="1.0" encoding="utf-8" ?>
<
ID
>
1
</
ID
>
<
Name
>
广东
</
Name
>
<
Parent
>
0
</
Parent
>
</
Local
>
<
ID
>
2
</
ID
>
<
Name
>
福建
</
Name
>
<
Parent
>
0
</
Parent
>
</
Local
>
<
ID
>
3
</
ID
>
<
Name
>
广州
</
Name
>
<
Parent
>
1
</
Parent
>
</
Local
>
<
ID
>
4
</
ID
>
<
Name
>
福州
</
Name
>
<
Parent
>
2
</
Parent
>
</
Local
>
<
ID
>
5
</
ID
>
<
Name
>
东山区
</
Name
>
<
Parent
>
3
</
Parent
>
</
Local
>
<
ID
>
6
</
ID
>
<
Name
>
越秀区
</
Name
>
<
Parent
>
3
</
Parent
>
</
Local
>
<
ID
>
7
</
ID
>
<
Name
>
白云区
</
Name
>
<
Parent
>
3
</
Parent
>
</
Local
>
<
ID
>
8
</
ID
>
<
Name
>
天河区
</
Name
>
<
Parent
>
3
</
Parent
>
</
Local
>
<
ID
>
9
</
ID
>
<
Name
>
福州内区
</
Name
>
<
Parent
>
4
</
Parent
>
</
Local
>
</
root
>
js部分:
<script language="javascript">
var cache;
var cachevalue;
var nownum=1;
var cache;
var cachevalue;
var nownum=1;
//hyde.chen
var hyde;
XmlHttp请求-->
function createXMLHttp()
{
var ret = null;
try {
ret = new ActiveXObject('Msxml2.XMLHTTP');
}
catch (e) {
try {
ret = new ActiveXObject('Microsoft.XMLHTTP');
}
catch (ee) {
ret = null;
}
}
if (!ret && typeof XMLHttpRequest != 'undefined')
ret = new XMLHttpRequest();
if (!ret)
{
alert("创建XMLHttpRequest失败!")
}
return ret;
}
XmlHttp请求-->
function createXMLHttp()
{
var ret = null;
try {
ret = new ActiveXObject('Msxml2.XMLHTTP');
}
catch (e) {
try {
ret = new ActiveXObject('Microsoft.XMLHTTP');
}
catch (ee) {
ret = null;
}
}
if (!ret && typeof XMLHttpRequest != 'undefined')
ret = new XMLHttpRequest();
if (!ret)
{
alert("创建XMLHttpRequest失败!")
}
return ret;
}
读取处理模块
function loadXmlToList(vv,oo,cc)
{
var xmlhttp = createXMLHttp();
xmlhttp.onreadystatechange = function() //ajax回调
{
try{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
xmldoc=xmlhttp.responseXML
if (xmldoc!=null)
{
node = xmldoc.lastChild.childNodes;
for(var i=0; i<node.length; i++){
node1 = node.item(i).selectSingleNode("ID");
node2 = node.item(i).selectSingleNode("Name");
node3= node.item(i).selectSingleNode("Parent");
if (node3.text==vv)
{
var oOption = document.createElement("OPTION");
oOption.text=node2.text;
oOption.value=node1.text;
//if (i==0) oOption.selected=true;
oo.add(oOption);
}
}
if (oo.options.length>0) nownum+=1;
else return;
if(nownum<cc.length && oo.options.length>0 && cc.length>2)
{
dataBing(nownum,cc);
}
}
}
}
catch(e)
{
//alert("Error:"+e.message);
//setTimeout("get_list(cache)",10000);
}
}
xmlhttp.open("GET", "local.xml",true);
xmlhttp.send(null);
}
catch(e)
{
//alert("Error:"+e.message);
//setTimeout("get_list(cache)",10000);
}
}
xmlhttp.open("GET", "local.xml",true);
xmlhttp.send(null);
}
list change 事件
function get_list(aa)
{
var b =getArray(aa)
//for(i=1;i<b.length;i++) //因为考虑到连动处理,必须等回调函数处理完才能进行下一个list的处理
if (b.length>1)
{
dataBing(1,b);
}
}
list清除和调用ajax
function dataBing(i,c)
{
var listobj = document.getElementById(c[i])
if(listobj!=null)
{
cachevalue=document.getElementById(c[i-1]).options[document.getElementById(c[i-1]).selectedIndex].value;
cache=c;
var count=listobj.options.length;
for(var n=0;n<count;n++)
{
listobj.remove(0);
}
xmldoc =loadXmlToList(cachevalue,listobj,cache);
}else
{
alert('加载数据不成功!');
}
function dataBing(i,c)
{
var listobj = document.getElementById(c[i])
if(listobj!=null)
{
cachevalue=document.getElementById(c[i-1]).options[document.getElementById(c[i-1]).selectedIndex].value;
cache=c;
var count=listobj.options.length;
for(var n=0;n<count;n++)
{
listobj.remove(0);
}
xmldoc =loadXmlToList(cachevalue,listobj,cache);
}else
{
alert('加载数据不成功!');
}
}
得到list处理数组
function getArray(vv)
{
nownum=1;
switch(vv)
{
case 1:
var o = new Array('local','area','ring');
return o;
case 2:
var o = new Array('area','ring');
return o;
default:
return null;
}
}
function getArray(vv)
{
nownum=1;
switch(vv)
{
case 1:
var o = new Array('local','area','ring');
return o;
case 2:
var o = new Array('area','ring');
return o;
default:
return null;
}
}
Html部分
<form id="Form1" method="post">
<div id="login">
<SELECT id="local" name="local" οnchange="get_list(1)">
</SELECT>
<SELECT id="area" NAME="area" οnchange="get_list(2)">
</SELECT>
<SELECT id="ring" NAME="ring">
</SELECT>
</div>
</form>
初始化:
<script>
nownum=1; //计数器,用来计算list个数
var intobj = document.getElementById("local"); 得到第一个下拉框
var o = new Array('null','local','area','ring');
loadXmlToList(0,intobj,o)
</script>
如果有好的意见,欢迎留言:)