jquery联级下拉菜单

CSS部分：

info{
width: 350px;
height: 30px;
font-size:12px;
float: left;
}

Script部分：

<script type="text/javascript">    $(function(){        //初始化        function init(obj){            return $(obj).html('<option>请选择</option>');        }        var arr = {            厂商一 : {                品牌一 : '型号1-1-1,型号1-1-2',                品牌二 : '型号1-2-1,型号1-2-2'            },            厂商二 : {                品牌一 : '型号2-1-1,型号2-1-2'            },            厂商三 : {                品牌一 : '型号3-1-1,型号3-1-2',                品牌二 : '型号3-2-1,型号3-2-2',                品牌三 : '型号3-3-1,型号3-3-2'             }        };        init($('#one'));        $.each(arr,function(key,values){            $('#one').append('<option>'+key+'</option>');        });        $('#one').change(function(){            init($('#two'));            init($('#three'));            $.each(arr,function(key,values){                var select = $('#one option:selected').text();                if(select == key){                    $.each(values,function(x,y){                        $('#two').append('<option>'+x+'</option>');                    });                    $('#two').change(function(){                        init($('#three'));                        $.each(values,function(x,y){                            var select = $('#two option:selected').text();                            if(select == x){                                var array = y.split(',');                                $.each(array,function(){                                    $('#three').append('<option>'+this+'</option>');                                });                            }                        });                    });                }            });        });    });</script>

html部分：

遇到的问题：

1.在(‘#one’).change变化时,没有在里面初始化,(‘#two’).init(),导致点击不同第一级菜单时，第二级菜单有多个重复项。