php select 多级联动,select框多级联动

后台获取数据做为前台的数据源：

public JSONArray getArray()throws Exception{

JSONArray jo=new JSONArray();

String id = "",superId = "",name = "";

JSONObject children=new JSONObject();

List list = (List) queryByList();

for (Area area:list) {

id = area.getArea_id()+"";

superId = area.getParent_id()+"";

name = area.getArea_name();

children.put("id", id);

children.put("pId", superId);

children.put("name", name);

jo.add(children);

children.clear();

}

return jo;

}

jsp中的js脚本：

function load(){

var areaArray = ${areaArray};

var area = new CLASS_LIANDONG(areaArray);            // 设置数据源

area.firstSelectChange("0","prov");                    // 设置第一个选择框

area.subSelectChange("prov","city");                // 设置子级选择框

area.subSelectChange("city","area");                // 设置子级选择框

}

function CLASS_LIANDONG(array){

// 数组，联动的数据源

this.array=array;

this.indexName='';

this.obj='';

// 设置子SELECT

// 参数：当前onchange的SELECT ID，要设置的SELECT ID

this.subSelectChange=function(selectName1,selectName2){

var obj1=document.all[selectName1];

var obj2=document.all[selectName2];

var objName=this.toString();

var me=this;

obj1.οnchange=function(){

me.optionChange(this.options[this.selectedIndex].value,obj2.id);

};

}

// 设置第一个SELECT

// 参数：indexName指选中项,selectName指select的ID

this.firstSelectChange=function(indexName,selectName){

this.obj=document.all[selectName];

this.indexName=indexName;

this.optionChange(this.indexName,this.obj.id);

}

// indexName指选中项,selectName指select的ID

this.optionChange=function (indexName,selectName){

var obj1=document.all[selectName];

var me=this;

obj1.length=0;

obj1.options[0]=new Option("请选择",'');

for(var i=0;i

if(this.array[i].pId==indexName){

obj1.options[obj1.length]=new Option(this.array[i].name,this.array[i].id);

}

}

}

}

所属省市：

省份

城市

修改页面赋初值:

$("#prov").val(1).change();//利用代码触发change事件

$("#city").val(2);