一个简单的三级联动,下拉框,核心JS

$(function() {
	// 选择机构业务类型改变时
	$('#organizationModelInfoId').on(
			'change',
			function() {
				$.ajax({
					type : 'post',
					url : 'ajaxJsonCall.action',
					data : {
						'pageConditionMap.organizationModelInfoId' : $('#organizationModelInfoId').val()
					},
					dataType : 'json',
					success : function(data) {
						var organizationInfocode;
						// 清空 选择机构下拉列表菜单
					$("#organizationInfoId1").empty();
					// 移除 选择部门下拉列表值
					$("#organizationInfoId2").find("option").remove();
					// 设置 选择部门下拉列表 初期值
					$('#organizationInfoId2').append(
							$("<option/>").text("全部").attr("value", "-1"));
					$.each(data.organizationInfoList, function(i, value) {
						if (i == 0) {
							organizationInfocode = value.organizationInfoId;
						}
						$('#organizationInfoId1').append($("<option/>").text(value.organizationName).attr("value",value.organizationInfoId));
					});
					// 初始化 页面第三个下拉框 选择机构
					organizationInfocalajax(organizationInfocode);
				}
				});
			});
	// 选择机构改变时
	$('#organizationInfoId1').on('change', function() {
		organizationInfocalajax($('#organizationInfoId1').val());
	});
	/**
	 * 初始化  选择机构
	 * @param 查询参数
	 * */
	function organizationInfocalajax(datainfo) {
		$.ajax( {
			type : 'post',
			url : 'ajaxJsonCall.action',
			data : {
				'pageConditionMap.organizationInfoId1' : datainfo
			},
			dataType : 'json',
			success : function(data) {
				// 清空 选择部门下拉列表菜单
			$("#organizationInfoId2").empty();
			// 设置 选择部门下拉列表 初期值
			$('#organizationInfoId2').append(
					$("<option/>").text("全部").attr("value", "-1"));
			$.each(data.organizationInfoList2, function(i, value) {
				$('#organizationInfoId2').append(
						$("<option/>").text(value.organizationName).attr("value", value.organizationInfoId));
			});
		}
		});
	});

主题思想:点击第一个下拉框的时候调用ajax与后台交互得到相应的list后进行遍历,将需要改变的下拉框删除后再重新生成下拉框.如此反复.