前端_JQuery一些小应用笔记

向右看齐 2022-08-14 02:59 151阅读 0赞

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

![SouthEast][]

![SouthEast 1][]

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

![SouthEast 2][]

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

[SouthEast]: /images/20220810/6aa6adc1b9764ef79debe7f29e36fbc4.png
[SouthEast 1]: /images/20220810/92f24ab66b144d119cfde8386d9af961.png
[SouthEast 2]: /images/20220810/87c31bc349354bf385ecb3e96b2bafa5.png