Jquery 多级联动

jquery中的多级联动非常的常见，比如设置用户或者某个物品所在的省市地区，比如公司里设置员工复杂的部门体系

以三级联动为例，实现起来大概需要这么几个步骤

1.需要三个select标签，每个标签设置唯一的id；因为2,3级依赖第一级，初始化第一个select，填充数据
<select id="type1" style="width:100px;">
    <option value="0"><?php echo t('请选择'); ?></option>
    <?php if ($list1) { foreach ($list1 as $v) { ?>
    <option value="<?php echo $v['gid']; ?>"><?php echo $v['name']; ?></option>
    <?php }
    } ?>
</select>
<select id="type2" style="width:100px;">
    <option value="0"><?php echo t('请选择'); ?></option>
</select>
<select id="type3" style="width:100px;">
    <option value="0"><?php echo t('请选择'); ?></option>
</select>

2.当第一级select变化时，触发对第二级的初始化动作，当第二级select变化时，触发对第三级的初始化动作
代码：
$('#type1').change(function() {
    $('#type2').html('<option value="0">'+file.lang('请选择')+'</option>');
    $('#type3').html('<option value="0">'+file.lang('请选择')+'</option>');
    $.each(arrData, function(k, v) {
    if (v.gid) {
        if ($('#type1 option:selected').val() == v.gid) {
        if (v.nodes) {
            $.each(v.nodes, function(x, y){
            $('#type2').append('<option value="'+ y.gid+'">'+ y.name+'</option>');
            });
        }
        return false;
        }
    }
    });
});
$('#type2').change(function() {
    $('#type3').html('<option value="0">'+file.lang('请选择')+'</option>');
    $.each(arrData, function(i, j) {
    if (j.nodes) {
        $.each(j.nodes, function(k, v) {
        if ($('#type2 option:selected').val() == v.gid) {
            $.each(v.nodes, function(x, y) {
            $('#type3').append('<option value="'+ x.gid+'">'+ y.name+'</option>');
            });
            return false;
        }
        });
    }
    });
});

注意事项

看转载源吧，懒得贴了

转自：http://www.godeye.org/lesson/118