前端_JQuery一些小应用笔记

1.复选框和下拉框联动，jQuery动态添加和删除select的option节点（只有选中的项才会加载到下拉框中）

function checkedThis(obj){
	var obj = $(obj);
	if(obj.attr("checked")){
		var sel= document.getElementById("pro_principal"); 
		sel.options.add(new Option(obj.parent().text(),obj.val()));		
	}else{
		$("#pro_principal option[value="+obj.val()+"]").remove();
	}
}

2.下拉框改变提示是否确认改变，取消的时候状态还原，jQuery操作select父子节点，selected选中项，Ajax请求（兼容火狐，reload()不兼容火狐。）

function changeStatus(obj){
	var pro_id = $(obj).parent().children("input").val();
	var status = $(obj).parent().children("select").val();
	var statusText = $(obj).parent().children("select").children("option:selected").text();
	var pre_status = $(obj).parent().children("input").eq(1).val();
	var pre_statusText = $(obj).find("option[value="+pre_status+"]").text();
	var result = confirm('确认是否将状态从 ['+pre_statusText+'] 改为 ['+statusText+'] ！');  
    if(result){
    	$.ajax({
	        url:"updateStatus.action",
	        type:"post",
	        dataType:"json",
	        data:"pro_id="+pro_id+"&status="+status
	    });
    }else{
	//window.location.reload();
	$(obj).parent().children("select").val(pre_status);
    }
}

3.表格中文本过长设置为省略号

$(function(){ 
　 var msg = $('#msg').val();
	if(msg!=""){
		alert(msg);
	}
	//自定义省略号
	customEllipsis();
});

//控制表格中的列中的a链接中的文字长度超出变成省略号
function customEllipsis(){
         $("#tbl_Info tr td a").each(function (){
		var a = $(this);
		if(a.text().length>10){
			a.text(a.text().substring(0,10) + "...");
		}
	});
}

4.下拉框三级联动

//下拉框二级联动:加载部门
function changeComSelect(){
	var companyid = $('#comid').val();
	var selectedText = $('#comid option:selected').text();
	//将选中的值的文本赋值给隐藏文本
	$('#sel_text_comname').val(selectedText);
	
	$.ajax({
        url:"getDep.action",
        type:"post",
        dataType:"json",
        data:"companyid="+companyid,
        success : bindCounterList
    });
    //加载部门
	function bindCounterList(json){
		//清空
		$("#depid").empty();
		var sel= document.getElementById("depid"); 
		sel.options.add(new Option("缺省",0));
	        $.each(json,function(i,obj){
			sel.options.add(new Option(obj.dep_name,obj.dep_id));
		});
		//等待部门加载完成，再加载默认员工
		changeDepSelect();
	}
}

//下拉框三级联动:加载人员
function changeDepSelect(){
	var companyid = $('#comid').val();
	var depid = $('#depid').val();
	var selectedText = $('#depid option:selected').text();
	//将选中的值的文本赋值给隐藏文本
	$('#sel_text_depname').val(selectedText);
	
	$.ajax({
        url:"getUser.action",
        type:"post",
        dataType:"json",
        data:"companyid="+companyid+"&depid="+depid,
        success : bindUserList
    });
    //加载员工
	function bindUserList(json){
		//清空
		$("#connectid").empty();
		var sel= document.getElementById("connectid");
		sel.options.add(new Option("缺省",0));
	        $.each(json,function(i,obj){
			sel.options.add(new Option(obj.relname,obj.id));
		});
		sel.options.add(new Option("手动填写",999));
	}
}
//手动填写联系人ID都为0，所以只能搜索名称
function changeUserSelect(){
	var connectid = $('#connectid').val();
	//手动填写
	if(pro_connectid==999){
		$('#connectname').css("display","inline-block");
		$('#connectname').val("");
	}else{
		var selectedText = $('#pro_connectid option:selected').text();
		$('#connectname').val(selectedText);
		$('#connectname').css("display","none");
	}
}