后臺獲取數(shù)據(jù)做為前臺的數(shù)據(jù)源：

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);????????????//?設置數(shù)據(jù)源

area.firstSelectChange("0","prov");????????????????????//?設置第一個選擇框

area.subSelectChange("prov","city");????????????????//?設置子級選擇框

area.subSelectChange("city","area");????????????????//?設置子級選擇框

}

function?CLASS_LIANDONG(array){

//?數(shù)組，聯(lián)動的數(shù)據(jù)源

this.array=array;

this.indexName='';

this.obj='';

//?設置子SELECT

//?參數(shù)：當前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

//?參數(shù)：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();//利用代碼觸發(fā)change事件

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

總結

以上是生活随笔為你收集整理的php select 多级联动,select框多级联动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。