第10课:多级联动

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;
		}
	    });
	}
    });
});

3.注意事项
看上面代码可以看到一个arrData
这个是三级联动的数据源
数据格式
array(
0 => array(
    'gid' => 1
    'name' => 'godeye.org'
    'nodes' => array(
        .....
    )
)
)
也就是说,数据源要反映互相的等级关系。

还有一点要注意的是jquery代码
if (j.nodes) {
    $.each(j.nodes, function(k, v)....

$.each前面有个判断,不要小看这个判断,如果没有,恰巧这个循环里没有数据,IE会报错的,其他浏览器虽然也会报错,但是不会到影响用户操作的程度,万恶的IE