动态添加删除li

痛定思痛。 2022-08-18 13:15 162阅读 0赞

这个功能的需求是这样的，接收人处显示多个用户名（是结果），在输入框输入完成后，回车键或者失去焦点，就去查询，查询结果出来后，通过点击加号再添到接收人处。这样中间有个验错的过程（如果操作的时候输入的用户名错了，可以不点加号，也就不会添加到接收人处）。带出姓名的本意是让操作人员检查一下查询出来的用户是不是要发送的用户，因为客服人员在给用户补发红包之类信息时操作光靠用户名很难确定是不是这个用户。如果查出来直接添到接收人处，那带出姓名就没有意义了。所以把加号放在后面，是让操作人员确认用户名和姓名是否匹配，如果没有问题，再加到接收人处。如下图：

![Center][]

当输入手机号有，在接收手机号处自动生成一个li，并且li横向排列，且到打右侧后自动换行，这个功能主要是js大显身手，下面看一下我的js:

1、前后台数据传输
    //查询用户信息
    function IfUserExist(username){
    	var name = username.value;
    	
    	if ($.trim(name) == "") {		
    		return;
    	} else {
    		$.ajax({
    			type : "POST",
    			url:getRootPath()+ '/servlet/defaultDispatcher?__action=SiteMessageService.getUserInfo&USERNAME='+ $("#UserName").val(),
    			dataType:"json", 
    			success:function(dataBack) {
    				if (!dataBack.UserName ) {					
    					$("#UserName").val("");
    					return;
    				}
    				//该文本框只读
    				$("#RealName").val(dataBack.RealName).attr("disabled",true);
    				//将存放userid的hidden置空
    				$("#ids").val("");
    				$("#ids").val(dataBack.Id);
    			}
    		});
    	}
    	
    }

<pre name="code" class="javascript">2、动态生成和删除li
    	jsp中创建ul
    		<ul class="chzn-choices" id="chosen" name="chosen"></ul>	
    	动态创建li
    		function add(){
    			  //获取ul节点信息
    			  var ul=document.getElementById('chosen');
    			  //创建一个li
    			  var li= document.createElement("li");
    			  //获取用户名
    			  var username=document.getElementById('UserName').value;
    			  //获取已经查询到的用户id-该用户id已放入一个hidden中
    			  var userId=document.getElementById('ids').value;
    			  if(!username || ""==username){
    				  $("#USERNAME").focus();
    				  return;
    			  }
    			  //给该li赋值
    			  li.innerHTML=username+",";
    			  //给该li赋id
    			  li.id=username+"_"+userId;
    			  //给该li赋class
    			  li.className ='title';
    			  li.title="单击以删除";
    			  ul.appendChild(li);	
    			  $("li").click(function(){
    					del(li.id);
    			  })
    			  $("#UserName").val("");
    			  $("#RealName").val("");
    		}
    //单击以删除
    function del(n)
    {
    	var li = $("ul li[id='"+n+"']"); 
     	li.remove();
    }

截取字符串并将多个li的id拼成字符串传到后台
    		//判断是否有接收人
    			var li=document.getElementById("chosen").getElementsByTagName("li");
    		
    			//遍历li并获取值放到hidden中     
    		     for(var i = 0; i < li.length; i++){          
    		    	 var liInfo = $("#chosen li")[i]; 
    		    	 var liId=liInfo.id;
    		    	 //获取最后一个下划线的索引
    		    	 var lastIndex = liId.lastIndexOf('_');
    		    	 //获取最后一个下划线后的字符串即userid
    		    	 var lastStr = liId.substring(lastIndex + 1)+",";
    		    	 //查询出所有id，组成字符串
    		    	 var str=lastStr+str;
    		    	 //将该字符串赋值给hidden
    		    	 $("#chosens").val(str);
    		    	     	      	 
         }

横排的li达到一定长度自动换行
    float:left;/*li自动换行*/

[Center]: /images/20220731/91d6fffde85c47c3919c7be00d552a82.png