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);