下拉框联动jquery\js例子

下拉框联动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);
}
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值