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