select框多级联动

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

public JSONArray getArray()throws Exception{
        JSONArray jo=new JSONArray();
        String id = "",superId = "",name = "";
        JSONObject children=new JSONObject();
        List<Area> list = (List<Area>) 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脚本：

<script language="javascript" > 
    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.onchange=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<this.array.length;i++){    
                if(this.array[i].pId==indexName){
                    obj1.options[obj1.length]=new Option(this.array[i].name,this.array[i].id);
                }
            }
        }
    }
</script>

<li>
                        <em>所属省市：</em>
                        <div>
                            <select name="prov" id="prov" style="width: 74px;height: 25px" >
                                <option selected>省份</option>
                            </select>
                            <select name="city" id="city" style="width: 74px;height: 25px" >
                                <option selected>城市</option>
                            </select>
                        </div>
                    </li>

修改页面赋初值:

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