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 = "<select name=\"cate_id\" οnchange=\"ajaxGetArea(this)\">"; // 此处注意添加onchange事件
                $.each(data, function(key, item) {
                    select += "<option value="+item.cate_id+">"+item.name+"</option>";
                });
                select += "</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：
 <select    οnchange="ajaxGetArea(this)" name="cate_id" id="area" >
                <?php foreach ($area as $cate): ?>
                
                                    <option value="<?php echo $cate['cate_id']?>"><?php echo $cate['name'];?></option>
                                <?php endforeach;?>
                                
  </select>