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