下拉框联动jquery\js例子

$(window).load(function () {
    // 父级下拉框修改时，根据其值修改子级的可见项
	$("#parentSelect").change(function () {
		var parentValue = $(this).val();
		var subComponent = $("#subSelect");
		buildSubSelectData(subComponent, parentValue);
	});
});

// 初始化父下拉框数据
PageUtils.ajaxSubmit(url, "", "POST", function (result) {
	var parentSelect = $("#parentSelect");
	parentSelect.empty();
	parentSelect.append("<option selected = \"selected\" value=''>请选择</option>");
	$.each(result['data'], function (i, item) {
		parentSelect.append("<option value='" + item.itemValue + "'>" + item.itemDesc + "</option>");
	});
});
// 初始化子下拉框数据
PageUtils.ajaxSubmit(url, "", "POST", function (result) {
	var subComponent = $("#subComponent");
	subComponent.empty();
	subComponent.append("<option selected = \"selected\" value=''>请选择</option>");

	$.each(result['data'], function (i, item) {
	    // 利用parentValue进行可见项的过滤
		subComponent.append("<option value='" + item.itemValue + "' parentValue='" + item.parentValue +  "' >" + item.itemDesc +  "</option>");
	});
	subComponent.attr("disabled","disabled");
});


// 根据parentValue修改subComponent的可见项
function buildSubSelectData(subComponent, parentValue){
    // 把subComponent的不可见项去掉
	subComponent.children("span").each(function(){
		$(this).children().clone().replaceAll($(this));
	});
	// 父级为"请选择"时，子级不可选
	if (parentValue == '') {
		subComponent.attr("disabled","disabled");
	}else {
		subComponent.removeAttr("disabled");
	}
	// 将不符合条件的项设置为不可见
	subComponent.children("option[parentValue!='" + parentValue + "'][value!='']").each(function(){
		$(this).wrap("<span style='display:none'></span>");
});

// 更加text设置下拉框的选中项
function selectByDesc(component, desc){
	var value = "";
	component.children("option").each(function () {
		if($(this).text() == desc){
			value = $(this).val();
		}
	});
	component.val(value);
}