js中实现三级联动效果

js：
$(function(){

ajaxGetArea($("#area"));

});




function ajaxGetArea(obj)
{
    /**
     * 请求地址 
     * 请求数据 
     */
    $.post(
       '__URL__/getArea',
        { 
            /**
             * 参数 
             */
            cate_id : $(obj).val() 
        },
        function(data) 
        {
            /**
             * 清除子类的select
             */
            $(obj).nextAll("select").each(function() {
                $(this).remove();
            });
          


            if (data) {


                /**
                 * 构造子类select的html 
                 */
                var select = null;
                select = ""; // 此处注意添加onchange事件
                $.each(data, function(key, item) {
                    select += ""+item.name+"";
                });
                select += "";


                /**
                 * 插入到右侧 
                 */
                $(obj).after(select);


                /**
                 * 触发下一个子类select的动态加载
                 */
                $(obj).next('select').trigger('change', function() {
                    ajaxGetArea($(this));
                });


                /**
                 * 更新name的位置 
                 */
                $(obj).removeAttr('name');
                $(obj).next('select').attr('name', 'cate_id');
            }
        },
        'json'
    );
}






html：