html select 태그 2 단계 연결

    

        
            //1.                 
            var cities = new Array(3);
            cities[0] = new Array("   ","   ","   ","   ");
            cities[1] = new Array("   ","   ","   ","   ");
            cities[2] = new Array("    ","   ","   ","   ");
            cities[3] = new Array("   ","   ","   ","   ");

            function changeCity(val){

                //7.         
                var cityEle = document.getElementById("city");

                //9.          option  
                cityEle.options.length=0;

                //2.          
                for(var i=0;i<cities.length;i++){
                    //  ，      
                    if(val==i){
                        //3.             
                        for(var j=0;j<cities[i].length;j++){
                            //4.         
                            var textNode = document.createTextNode(cities[i][j]);
                            //5.  option    
                            var opEle = document.createElement("option");
                            //6.           option    
                            opEle.appendChild(textNode);
                            //8. option                
                            cityEle.appendChild(opEle);
                        }
                    }
                }
            }
        
    
    
        
                                    --   --
                                      
                                      
                                      
                                      
                                
                                

                                
    

            $(function(){
                //2.               
                var cities = new Array(3);
                cities[0] = new Array("   ","   ","   ","   ");
                cities[1] = new Array("   ","   ","   ","   ");
                cities[2] = new Array("    ","   ","   ","   ");
                cities[3] = new Array("   ","   ","   ","   ");

                $("#province").change(function(){
                    //10.            
                    $("#city").empty();

                    //1.         
                    var val = this.value;
                    //alert(val);
                    //3.          
                    $.each(cities,function(i,n){
                        //alert(i+":"+n);
                        //4.               
                        if(val==i){
                            //5.           
                            $.each(cities[i], function(j,m) {
                                //alert(m);
                                //6.        
                                var textNode = document.createTextNode(m);
                                //7.  option    
                                var opEle = document.createElement("option");
                                //8.          option      
                                $(opEle).append(textNode);
                                //9. option                
                                $(opEle).appendTo($("#city"));
                            });
                        }
                    });

                });
            });
        


    --   --