MyJSFrame Demo 04
下拉级联
多个下拉框关联，展现树形数据，常见的有省市联动，产品分类等，这里用省市联动的例子来分析多个下拉框之间的关系。级联的数据可以有两种方法读取，1、分批读取数据，每选中一项都会读取一次子级数据； 2、如果要减少读取数据的次数，可以在页面初始化时即加载所有省市数据，在页面缓存。两种方法各有利弊。这里使用第一种方法作为例子。
<![CDATA[
function loadData(id,div){
var myAjax = new Ajax.Request(
"data.asp",
{
setRequestHeader:{"If-Modified-Since":"0"}, //数据不缓存
parameters:"id="+id,
onComplete:function(x){
eval("var arr="+x.responseText); //把服务端返回的数据转换为本地数组，json格式
var html = new StringBuffer(); //字符串缓存器
for(var i=0,j; j=arr[i]; i++){
html.append("<option value='"+j["id"]+"'>"+decodeURIComponent(j["name"])+"</option>"); //构造下拉框
}
switch (div){
case "provList": $("provList").innerHTML = "<select onchange=loadData(this.value,'cityList')><option value=''></option>"+html.toString()+"</select>"; break;
case "cityList": $("cityList").innerHTML = "<select onchange=loadData(this.value,'areaList')><option value=''></option>"+html.toString()+"</select>"; id=="" ? $("areaList").innerHTML = "<select><option></option></select>" : ""; break; //当省份为空时，城市与地区也为空
case "areaList": $("areaList").innerHTML = "<select><option value=''></option>"+html.toString()+"</select>"; break;
}
}
}
);
}
]]>
省市联动这里还有一个极端的例子：访问